CSS
css基本语法
css概述
1.CSS指层叠样式表
2.样式定义如何显示HTML元素
3.样式通常存储在样式表中
4.吧样式添加到HTML4.0中,是为了解决内容与表现分离的问题
5.外部样式表可以极大提高工作效率
6.外部样式表通常存储在CSS文件中
7.多个样式定义可层叠为一个
css基本样式
文档流的顺序:上左下右
行级表情:按照文档流的顺序依次排列
块级标签:独占一行
基本样式
宽:width:100px;
高:height:100px;
背景颜色:background-color:coral;
css注释
CSS注释以/开始,以/结束
css引入方式
内部样式表
当单个文档需要特殊的样式时,就应该使用内部样式表。
内联样式表
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。
外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。
css样式表优先级
- 就近原则
- 内部样式与外部样式
- 单一样式优先级
css中的冲突、层叠、继承
- 冲突
两个对同一标签属性进行设置不同样式时,就产生了冲突 - 层叠
设计几种不同样式在最终显示时,会将几种效果叠加显示 - 继承
文字相关的样式可以被继承
布局相关的样式可以被继承
CSS选择器
全局选择器
<style>
*{
padding:0;
margin:0;
}
</style>
</head>
<body>
<ul>
<li>padding内填充</li>
<li>margin外边框</li>
<li>盒模型</li>
</ul>
</body>
标签选择器
<style>
p{
font-size:16px;
}
b{
color:coral;
}
</style>
</head>
<body>
<p>我是HTML中的段落标签</p>
<b>我是HTML中的加粗标签</b>
</body>
类选择器
<style>
.className{
color:coral;
}
</style>
</head>
<body>
<b>我是HTML中的加粗标签</b>
</body>
Id选择器
<style>
#id{
color:coral;
}
</style>
</head>
<body>
<b id="id">我是HTML中的加粗标签</b>
</body>
群组选择器
<style>
p,
b,{
color:coral;
}
</style>
</head>
<body>
<p>我是HTML中的段落标签</p>
<b>我是HTML中的加粗标签</b>
<span>我是HTML中的span标签</span>
</body>
层次选择器
1.后代选择器 空格
2.子代选择器 >
<style>
#ul_1 li{
list-style:none;
}
#ul_1>li{
list-style:circle;
}
</style>
</head>
<body>
<ul id="ul_1">
<li>
我是第一层的li标签
<ul>
<li>我是第二层的li标签</li>
<li>我是第二层的li标签</li>
</ul>
</li>
</ul>
</body>
相邻兄弟 +
.uu+a{background-color: blue;}
通用兄弟 ~
.uu+a{background-color: blue;}
伪类选择器
/* 默认状态 */
b+a:link{background-color: yellowgreen;}
/* 、访问过后的状态 */
b+a:visited{background-color: aqua;}
/* 鼠标悬浮 */
b+a:hover{background-color: red;}
/* 鼠标按下 */
b+a:active{background-color: orange;}
/*结构伪类 */
ul li:nth-child(3){background-color: orangered;}
a:nth-child(4){background-color: gold;}
ul p:nth-child(18){background-color: antiquewhite;}