首页 > 代码库 > 前端day02CSS+DIV
前端day02CSS+DIV
CSS作用？
答： 美化页面
英文缩写及含义？
cascading style sheet(层叠样式表)
CSS语法：
选择器{ CSS属性名：属性值；CSS属性名：属性值； } （最后一个冒号可以省略不写）
什么叫做CSS的引入方式？
答：就是在HTML里如何才能使用CSS样式
CSS引入方式：
方式一：内联样式表
通过标签的style属性来引入<xxx style="CSS属性名：CSS属性值" />
<div style="background-color:red" >传智播客内联样式表</div>
方式二：内部样式表
通过head的子标签style标签来引入的
<style type="text/css">
#div01{
background-color: #ff0;
}
</style>
方式三：外部样式表
通过head的子标签link来引入
<link href="http://www.mamicode.com/css/1.css" rel="stylesheet"/>
CSS选择器是干嘛用的？用什么用处？
答： 就是通过什么方式引入CSS样式，是通过id 还是 class 还是元素 还是自定义属性呐？
上面的方式二就是通过ID选择器来引入的CSS样式
css选择器:
id选择器
html:需要标签上 给一个id属性值 必修赋值 <xxx id="x"/>
css:以#打头x #x{...}
class选择器
html:需要在标签上 给一个class属性 必须赋值 <xxx class="y"/>
css:以.打头y .y{...}
元素选择器
html:<xxx />
css:xxx{...}
属性选择器
html:需要在标签上 随意随便 给一个属性值 <xxx zzz="z" />
css:xxx[zzz=‘z‘]{...}
span[zzz="z"]{
background-color: aliceblue;
}
--------------------------------------------------------------------------------------
如果上面的描述看的不太懂，请看下面的实现代码，你一定会看的懂。哈哈
ID
#div01,#div02{
background-color: red;
}
CLASS
.div03{
background-color: blue;
}
自定义属性
div[zzz="z"]{
background-color: blue;
}
元素
span{
background-color: red;
}
--------------------------------------------------------------------------------------
伪类选择器
锚伪类选择器 (a是标签)
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
派生选择器
分组选择器
选择器1,选择器2
节约代码
#div01,#div02,#div03{
background-color: red;
}
后代选择器
父选择器 后代选择器
在父选择器的基础上值 在其后代中选中符合第二个选择器的元素
选择器优先级 权重
越特殊优先级越高
id选择器
class选择 属性选择
元素选择器
CSS 简单属性：
文本文字属性
text-align: center;
font-size:20px;
font-family: 隶书;
font-style: italic;
font-weight: bold;
背景属性
background-color: red;
//background-image: url(img/ad.jpg);
边框宽高
#div01{
border: 1px solid yellow;
/* 宽度 样式 颜色*/
height: 200px;
width: 50%;
}
#div02{
border-bottom:2px dashed red ;
border-left:2px solid deeppink ;
}
浮动属性和清除浮动属性：
//设置浮动属性
float: right;
float: left;
//清除浮动属性
.clearfix{
clear: both;
}
</style>
</head>
<body>
<div class="classA">1</div>
<div class="classA">2</div>
<div class="classA">3</div>
<div class="classA">4</div>
<div class="clearfix"></div>
<div class="classA">5</div>
<div class="classA">6</div>
<div class="classA">7</div>
<div class="classA">8</div>
</body>
display:
控制选中元素显示 与否和显示的样式
#div03{
display: none; //不显示
display: block； //显示
}
h3{
display: inline; //不换行
}
盒子模型：
padding: 10px 15px 20px 25px; //内边距
margin: 10px; //外边距
div标签：
块级标签，独占一行
span标签：根本没听懂！！！！！！ 理解为占位
行内标签
作用？ 组织行内元素
前端day02CSS+DIV