1.CSS概述
1.什么是CSS？
CSS：Cascading style sheets层叠样式表，级联样式表，简称样式表。2.CSS的作用
定义HTML页面中元素的样式1.实现内容和表现的分离
2.实现代码的可重用性和可维护性
3.CSS与HTML之间的关系
1.HTML：内容的体现2.CSS：样式的修饰
如果CSS样式属性与HTML属性相冲突时，W3C建议尽量使用CSS属性去取代HTML属性。
2.CSS基础语法
1.CSS的使用方式
1.内联方式（行内样式）
也称行内样式。语法：将样式定义在元素的style属性中
ex:<p style="样式声明"></p>
样式声明：由属性和值组成
ex:CSS属性:值;
<p style="CSS属性:值;CSS属性2:值;"></p>
常用CSS属性：
1.color:定义文本颜色
取值：颜色英文单词
2.font-size:定义字体大小
取值：数值+px
3.background-color:定义背景颜色
取值：颜色的英文单词
2.内部样式
将样式定义在HTML头元素<head></head>中特点：当前页面中可以随意使用定义好的样式
使用步骤：
1.在<head></head>增加一对<style></style>元素
2.在<style>元素中去增加样式规则
样式规则：由选择器和样式声明组成
选择器：规范页面中哪些元素可以使用定义好的样式
元素选择器：由元素名称作为选择器，规范当前标记的样式
选择器{ 样式声明
(属性:值;)
}
3.外部样式
将样式定义在外部的CSS文件中，在HTML页面对CSS文件进入引入使用步骤：
1.创建一个CSS文件(.css为结尾的文件)
2.在CSS文件中写样式规则
3.在网页中引入CSS文件，在head中引入
<head>
<link rel="stylesheet" href="CSS文件url">
</head>
练习1：
1.使用内联样式为p元素设置背景颜色为灰色，字体颜色为绿色，字体大小为50px;
2.使用内部样式为div元素设置字体大小为70px,字体颜色为蓝色。
3.使用外部样式为span元素设置字体大小为90px,背景颜色为黄色。
3.CSS样式特征
1.继承性
大部分样式属性可以被继承（子继承父）ex:
body{
color:blue;
font-size:50px;
}
/*以下是标记*/
<body>
<div>
这是div元素中的内容
</div>
<span>sssssss</span>
<h4>hhhhhhhh</h4>
</body>
2.层叠性
为一个元素定义多个选择器，当样式声明不冲突时，多个样式会叠加到一起被元素所应用。ex:
div{
background-color:gray;
}
body{
color:blue;
font-size:50px;
}
/*以下是页面标记*/
<body>
<div style="color:red;">
这是div元素中的内容
</div>
</body>
3.优先级
如果样式冲突时，按照不同样式的优先级来应用样式。浏览器缺省设置 最低
内部样式和外部样式 中（就近原则）
内联样式 最高
4.调整显示优先级
!important规则将!important添加到样式属性值之后，与值
之间用空格隔开。
作用：调整显示的优先级
练习2：
在练习1基础之上，用外部样式表定义div样式，设置其字体大小为90px，文本样色为黄色，改变内部样式与外部样式的位置，查看浏览器中的效果。
4.基础选择器
选择器作用：用于匹配页面中的元素1.通用选择器
作用：匹配页面中所有元素语法：*{样式声明}
效率较低，尽量少用
2.元素选择器
又叫标记选择器，标签选择器作用：定义页面某一类元素的样式
语法：由元素名称作为选择器
ex:div{样式声明}
p{}
a{}
header{}
img{}
u{}
3.类选择器
作用：通过标记所附带的class属性值对选择器进行引用特点：一段公共样式，谁想用谁就可以引用
语法：.类名{样式声明}
定义类名注意：
1.不能以数字开头
2.不能包含特殊符号（#，@，$,%,^,&）,但是包含(-,_)
引用：
<p class="类名"></p>
多类选择器：
允许让一个元素应用多个类选择器ex:<p class="类名1 类名2 类名3"></p>
分类选择器：
将元素选择器和类选择器联合使用，从而实现对元素的不同样式的细分控制。语法：元素选择器.类选择器{样式声明}
4.id选择器
作用：使用元素所附带的id属性值来进行样式的声明定义
语法：#idvalue{样式声明}
5.群组选择器
作用：定义一组选择器的公共样式选择器列表用逗号隔开
ex:div,p.text,#top,.myf,span{样式声明}
6.后代选择器
作用：依托于后代关系匹配页面的元素后代：一级以及多余一级父子关系
语法：选择器1 选择器2 选择器3{样式声明}
7.伪类选择器
作用：匹配元素不同状态的样式语法：
:伪类名称{样式声明}
选择器:伪类名称{样式声明}
伪类分类：
1.链接伪类
:link 匹配尚未访问的超级链接
:visited 匹配访问过的超级链接
2.动态伪类
:hover 匹配鼠标悬停在元素上的状态
:active 匹配元素被激活时的状态
:focus 匹配元素获取焦点的状态
练习：按照以下布局写出CSS样式
<header id="one">
<div>
<span class="ad">
<a>要求用后代选择器设置当前文本样式，当鼠标悬停时文本颜色为红色，字体为30px</a>
</span>
</div>
</header>
5.尺寸与边框
1.尺寸单位
%：相对单位px:像素，文字大小
pt:磅 1/72in
in:英寸-->2.54cm
cm:厘米
mm:毫米
em:倍数
2.颜色单位（颜色取值）
1.颜色的英文单词red,blue,green,yellow,black,pink...
2.rgb(r,g,b)
r:0-255
g:0-255
b:0-255
3.rgb(r%,g%,b%)
4.#rrggbb
0-9或A-F组成
#000000 黑色
#ffffff 白色
#eeeeee 灰色
5.#rgb
#000 黑色
#fff
#ff11aa-->#f1a
3.尺寸属性
用于设置元素的宽度和高度默认尺寸：
块级元素：
宽度：占据父元素宽度的100%
高度：自适应
行内元素：
宽度：自适应
高度：自适应
属性：
1.宽度：width
取值：
具体数值+px
百分比 %
2.高度：height
取值：
具体数值+px
百分比 %
哪些元素的尺寸允许修改？
1.块级元素允许修改尺寸
2.非块级元素，本身存在width和height属性的元素（img,table），允许修改尺寸。
但是不具备width和height属性的行内元素(a,span,i,u,b)不能修改其尺寸。
4.边框
就是围绕在元素内容和内边距外的线条。1.边框属性
1.简写方式border:width style color;
width:边框的宽度（粗细）
style:边框的样式（实线，虚线）
取值：
solid:实线
dotted:虚线
dashed:选线
color:边框的颜色 合法的颜色值
2.单边设置
属性：border-方向：width style color;方向：
top:上
bottom:下
left:左
right:右
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
