一、什么是CSS?
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
二、CSS语法
css基础语法
css规则有两个主要部分构成: 选择器以及一条或多条声明
每条声明由一个属性和一个值组成。属性(property)是设置的样式属性，每个属性有一个值，属性和值被冒号分开。
比如： selector {property：value}
选择器通常是需要改变样式的HTML元素。
比如： h1{color: red; font-size: 14px;}
h1 是选择器， color和font-size是属性， red和14px是值
注意：
如果定义不止一个声明则需要用分号将每个声明分开。例如：p{text-align:center;color:red}
如果值为若干单词，则要给值加引号： 例如：p {font-family: "sans serif";}
css高级语法
- 选择器的分组
h1,h2,h3,h4,h5,h6 {
color: pink;
}
- 继承机器问题：根据css规则，子元素从父元素继承属性
body {
font-family: Verdana, sans-serif;
}
三、创建CSS
css 创建样式表分为三种情况：
内部样式
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
div{width:200px; height:200px; border:1px solid red;}
</style>
</head>
行内式(内联样式)
<div style="width:200px;height:100px;border:1px solid black;"></div>
外部样式表(外链式)
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
样式优先级： 内联样式 > 内部样式 > 外部样式
- 行内样式表： 优点 书写方便；缺点 没有实现样式和结构相分离；使用情况 较少；控制范围 控制一个标签(少)。
- 内部样式表： 优点 部分结构和样式相分离； 缺点 没有彻底分；使用情况 较多；控制范围 控制一个页面(中)。
- 外部样式表： 优点 完全实现结构和样式相分离； 缺点 需要引入；使用情况 最多，推荐；控制范围 控制整个站点(多)。
四、id和class选择器
- ID选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，id 属性和身份证一样具有唯一性。
HTML元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 "#" 来定义，id 属性不能以数字开头。
语法：
#id名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
- class选择器
class 选择器用于描述一组元素的样式，也叫做类选择器。
class 可以在多个元素中使用，并且一个元素也可以指定多个类名。
在CSS中，类选择器以一个点“.”号来定义，类名的第一个字符不能使用数字。
语法：
.类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
- id选择器和类class选择器的区别
相同点
- 都可以应用于任何元素
不同点
- ID 选择器只能在文档中使用一次，而类选择器可以使用多次。
- 可以使用类选择器词列表方法为一个元素同时设置多个样式(也就是一个元素可以制定多个类名)，而ID只能指定一个。
五、CSS元素选择器
语法：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
六、css链接
链接的四种状态是：
a:link - 正常，未访问过的链接。
a:visited - 已访问过的链接。
a:hover - 当鼠标滑动到链接上时。
a:active - 链接被点击的那一刻。
七、高级选择器
分组和嵌套选择器
#分组
h1, p {color: red;}
#嵌套
.div1 p a{
color:yellow;
font-weight:bold;
}
<div class="div1">
<p>嵌套选择器
<a href="#">深层嵌套选择器</a>
</p>
</div>
通配符选择器
*{
padding:0;
margin:0;
}
属性选择器
- 属性选择器：属性选择器使用[attr]
- 属性和值选择器：属性选择器使用[attr=value]
- 属性和多个值的选择器：使用有两种情况：属性值用空格分隔使用：[attr~=value]；属性值用连字符分隔则使用：[attr|=value]
组合选择器
- 后代选则器:又称为包含选择器，以空格分隔，子元素选择器只能选择作为某元素子元素的元素。
- 子元素选择器:子元素选择器只能选择作为某元素子元素的元素，以 > 分隔，子元素选择器只能选择作为某元素子元素的元素。
- 相邻兄弟选择器：可选择紧接在另一元素后的元素，且二者有相同父元素，以 + 分隔。
- 普通相邻兄弟选择器：选取所有指定元素的相邻兄弟元素，以 ~ 分隔。
- 选择器组合：多种选择器可以结合起来使用。
八、伪类
CSS 伪类是用来向一些选择器添加特殊的效果。
语法：选择器:伪类{attr:value;}
伪类和 CSS 类(伪类可以与 CSS 类配合使用)
CSS2 - :first - child 伪类
选择作为任何元素的第一个子元素
CSS2 - :lang 伪类
使用 :lang 伪类可以为不同的语言定义特殊的规则
九、CSS伪元素
CSS 伪元素是用来为一些选择器添加特殊的效果。
语法：选择器:伪元素{attr:value;}
CSS2 - :before 伪元素
CSS2 - :after 伪元素
content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容，该属性用于定义元素之前或之后放置的生成内容。
网友评论