CSS基础---日记4
1.CSS的概述：
问题：1.让html页面中所有的文本都变成红色
2.页面中所有的div都变成蓝色
HTML的属性不足：
完成相同的效果，不同的标记使用不同的属性：
< body text="red">文本颜色为红色
<font color="red">文本颜色为红色
2.什么是CSS？
层叠样式表，级联样式表，样式表（cascading style sheet）
定义HTML在页面中的样式
1.实现了内容（HTML元素）与表现（css样式）相分离
2.提高了代码的可重复性和可维护性
CSS与HTml之间的关系和使用规则：
html:用于搭建网页结构，构建内容
css:专门定义页面的样式，与内容无关
w3c建议尽量使用css样式来取代HTML的属性：
1.允许被css取代的属性：
ex:< body text="">
< font color="">
无法被取代的属性：
< table>
<tr>
< td colspan="2"></td>
</tr>
</table>
2.css的语法
1.使用css样式表
1.css样式表的使用方式
1.内联方式
内联方式：又称为行内样式，内联样式
将样式定义在HTML元素中
CSS语法（重点）
1.将样式属性及值 声明在元素的style元素中
<ANY style="样式声明；样式声明；”>
2.样式声明的语法：
样式声明是由样式属性及值组成的
语法：样式属性：值； 样式属性：值
ex:样式属性：
属性：color
取值：red,yellow,blue
属性：background-color
作用：修饰元素的背景颜色
属性：font-size
以px为单位的数值
修饰元素的文本大小
2.内部样式表
将若干样式规则声明在style元素内，用于控制整个页面的效果
1.在<head>元素中，添加style元素
在style中，追加样式规则
样式规则：
1、选择器
作用：规范了页面中哪些元素能够使用声明好的样式
2、若干样式声明
有效范围：只在当前页面有效
语法：
选择器{
样式声明;
样式声明;
||
样式属性:值;
样式属性:值;
}
ex:
div{
color:red;
font-size:24px;
}
3、外部样式表
将 样式定义在 外部的 样式表文件(**.css)中，可以在使用的网页中对样式表文件进行引入
1、创建一个样式表文件(**.css)，用来保存若干样式规则
2、在使用的网页上进行样式表的引用
<head>
<link rel="stylesheet" type="text/css"(写不写都可以) href="**.css(css文件URL)">
</head>
2、CSS样式表特征
1、继承性
大部分的样式属性，是可以被继承的
如：color，font-size，background-color
父元素定义好的样式可以用在子元素上
2、层叠性
可以为 一个元素 定义多个样式规则
样式规则中的样式属性不冲突时，多个样式规则中的规则可以层叠为一个
3、优先级
在层叠性的基础上，如果样式属性冲突的话，按照不同的样式规则的优先级来应用样式
优先级
1、浏览器缺省设置(user agent style sheet) 优先级最低
2、外部样式表和内部样式表
就进原则
后定义优先
3、内联样式 优先级最高
4、!important规则
显示调整样式属性的优先级
冲突的样式中，以!important为准
选择器{
属性:值 !important;
}
注意：谨慎使用
3、基本排错
1、提示Unknown property name
样式属性名写错
2、提示Invalid property value
样式属性值写错
3、缺失;(或者写错)
剩下属性都认为是当前属性的值
4、缺失}
从缺失的位置起，下面所有的选择器全都不起作用
4、选择器(重难点)
1、选择器的作用
规范页面中哪些元素能够使用声明好的样式匹配页面元素
2、选择器详解
1、通用选择器
1、作用：匹配页面中所有的元素
2、语法：*{样式声明;}
3、注意
尽量少用*{}
尽可能的使用 继承性 来取代*{}
2、元素选择器
1、作用
指定页面元素的默认样式
2、语法
以元素名称来作为选择器名称
元素名{}
ex：h3{} div{}
3、类选择器
1、作用
定义好之后，可以由任意标记通过class属性来进行引用的选择器
2、语法
.类名{}
类名：
1、不能以数字开始
2、除英文、数字、_,-之外，不能包含其他特殊字符
3、尽量见名知意
引用：<ANY class="类名">
ex： .redcolor{color:red;}
3、引用方式-多类选择器
允许一个元素引用多个类选择器，引用时，选择器名称用 空格 隔开即可
语法：<ANY class="class1 class2 class3...">
4、声明方式-多类选择器
将类选择器 和 元素选择器 结合起来使用，以实现对某种元素中不同样式的细分控制
语法：
元素选择器.类选择器{}
ex：p.redcolor{font-size:48px;}
4、ID选择器
1、作用
定义 页面中 指定ID值 的元素的样式
2、语法
#idValue{样式声明;}
注意：选择器，实际上就是页面元素的id值
5、群组选择器
1、作用
选择器声明以逗号隔开的选择器列表
2、语法
选择器1,选择器2,选择器3,...{}
ex: #nav,.redcolor,.bigfont,#sec,span{
color:red;
}
id为nav的元素，class为redcolor的元素，class为bigfont的元素，id为sec的元素，页面上所有的span元素，字体颜色为 红色
6、后代选择器
后代：只要具备层级关系的元素都可以称之为后代
语法：选择器1 选择器2{}
ex：1、要匹配 id为d1元素中的所有span元素
#d1 span{}
2、要匹配class为redback的元素中 所有 class为bigfont的元素
.redback .bigfont{}
7、子代选择器
子代：只具备一级层级关系的元素，称之为子代元素
语法：选择器1>选择器2{}
特点：不想匹配任意后代，而是想缩小范围
8、伪类选择器
1、作用
为了匹配元素不同的状态的
2、伪类选择器
所有的伪类选择器都是以 ：作为开始
多数会配合着其他选择器一起使用
1、链接伪类
:link,匹配尚未访问的超链接的状态
:visited,匹配访问过的超链接的状态
2、动态伪类
:hover,匹配鼠标悬停时的状态
:active,匹配元素被激活时的状态(一瞬间)
:focus,匹配元素获取焦点时的状态(光标闪动时)
注意：
为 超链接 元素定义伪类样式时，如果链接伪类和动态伪类同时设置时，必须按照以下顺序设定
:link{}
:visited{}
:hover{}
:active{}
3、目标伪类
4、元素状态伪类
5、结构伪类
6、否定伪类
3、选择器优先级
主要看权值
元素选择器：1
类选择器：10
伪类选择器：10
ID选择器：100
内联样式：1000
选择器权值加到一起大的优先，权值相同，后定义优先
注意：继承的样式与自定义的样式相冲突时，永远都是以自定义为主(与权值无关)
posted on 2017-03-19 09:50 zhangailing 阅读(116) 评论(0) 收藏 举报
浙公网安备 33010602011771号