前端-CSS
CSS层叠样式表
一、css的语法
-
什么是css？
层叠样式表
-
命名规则：
使用字母、数字或下划线和减号构成，不要以数字开头
-
格式：
选择器{属性:值;属性:值;属性:值;…}
其中选择器也叫选择符
-
CSS中注释
/* ... */
二、在HTML中如何使用css样式（html中嵌入css的方式）
1、内联方式（行内样式）
就是在HTML的标签中使用style属性来设置css样式
格式： <html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>
<p style="color:blue;font-family:隶书">在HTML中如何使用css样式</p>
特点：仅作用于本标签
2、内部方式（内嵌样式）
就是在head标签中使用<style type="text/css">....</style>标签来设置css样式
格式：
<style type="text/css">
....css样式代码
</style>
**特点：**作用于当前整个页面
3、外部导入方式（外部链入）
-
（推荐）就是在head标签中使用
<link/>标签导入一个css文件，在作用于本页面，实现css样式设置格式：
<link href="文件名.css" type="text/css" rel="stylesheet"/>- 还可以使用import在style标签中导入css文件。
特点：作用于整个网站
三、**css2的选择符：
1、html选择符（标签选择器）
就是把html标签作为选择符使用
如 p{…} 网页中所有p标签采用此样式
h2{....} 网页中所有h2标签采用此样式
2、class类选择符 (使用点.将自定义名（类名）来定义的选择符)（类选择器P）
定义： .类名{样式…} 匿名类
其他选择符名.类名{样式…}
使用：<html标签 class="类名">...</html标签>
.mc{color:blue;} /* 凡是class属性值为mc的都采用此样式 */
p .ps{color:green;} /只有p标签中class属性值为ps的才采用此样式/
注意：类选择符可以在网页中重复使用
3、Id选择符(ID选择器)
定义： #id名{样式…}
使用：<html标签 id="id名">...</html标签>
注意：id选择符只在网页中使用一次
选择符的优先级：从大到小 [ID选择符]->[class选择符]->[html选择符]->[html属性]
4、关联选择符（包含选择符）
格式： 选择符1 选择符2 选择符3 …{样式…}
例如： table a{…} /*table标签里的a标签才采用此样式*/
h1 p{color:red} /*只有h1标签中的p标签才采用此样式*/
5、组合选择符（选择符组）
格式： 选择符1,选择符2,选择符3 …{样式…}
h3,h4,h5{color:green;} /*h3、h4和h5都采用此样式*/
6、*通配符（全局选择器）
说明：
通配符的写法是“*”，其含义就是所有元素。
用法：
常用来重置样式
*{padding:0; margin:0;}
7、伪类选(伪元素)择符：
格式： 标签名:伪类名{样式…}
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */
为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
例如：
a{color:red;} a:hover{color:green;} 表示超链接的三种状态都相同，只有鼠标划过变颜色。
伪类（Pseudo classes）是选择符的螺栓，用来指定一个或者与其相关的选择符的状态
优先级:行内->css3选择器->id->class->html->html属性
四、 CSS3中的选择器
div>p 选择所有作为div元素的子元素p
div+p 选择紧贴在div元素之后p元素
div~p 选择div元素后面的所有兄弟元素p
[attribute]选择具有attribute属性的元素。
[attribute=value]选择具有attribute属性且属性值等于value的元素。
伪类选择器（简称：伪类）通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。
:before设置在对象前（依据对象树的逻辑结构）发生的内容。
:after设置在对象后（依据对象树的逻辑结构）发生的内容。
span:before{
content: '必须存在的属性';
display: block;
border:1px solid red;
}
span:after{
content: '必须存在的属性';
display: block;
border:1px solid red;
}
五、CSS中常用的属性：
1、color颜色属性：
color 英文单词
{color:red;}
2、字体属性： font
font
*font-size: 字体大小：20px，60%基于父对象的百分比取值
*font-family： 字体：宋体，Arial
*font-weight： 字体加粗 ：bold
3、文本属性：
*text-align: 文本的位置：left center right
*text-decoration: 字体画线：none无、underline下画线，line-through贯穿线
*line-height：行高
*color： 字体颜色
5、背景属性：background
- *background-color: 背景颜色
- *background-image: 背景图片