CSS3概述
1.什么是CSS
Cascading style sheets 层叠样式表、级联样式表.简称样式表
2.CSS的作用
设置HTML网页中元素的样式
3.HTML与CSS的关系
HTML:负责网页的搭建,内容展示-----一个页面骨架
CSS:负责网页的修饰,样式的构建-----给网页化妆
4.HTML属性与CSS的使用原则
W3C建议我们尽量使用css的方式来取代HTML属性
CSS样式:
a.样式代码高度重用
b.方便后期的维护,提高了可维护性
CSS的语法规范
使用CSS的方式
1.行内样式/内联样式
将css样式定义在html标签中
样式声明: 样式属性:值; 样式属性:值 color:red;
内联样式开发中基本不用,只在学习和测试的使用
内联样式无法重用,内联样式优先级最高
常用的样式:
1.设置文本颜色
color:合法的颜色值(颜色的单词)
2.设置字体的大小
font-size:以px为单位的数字
3.背景颜色
background:合法的颜色值
内部样式
在网页head标签中创建style标签,在style标签内部定义样式
<style>
样式规则1;
样式规则2;
</style>
样式规则:由选择器和样式声明组成
div{color:purple;}
元素选择器,由元素名称作为选择器
页面上匹配这个元素的名称元素,都可以使用该样式
特点:
只能在本页面重用,其它页面无法重用,重用效果有限
开发中少用,学习和测试中使用较多
外部样式
独立于任何网页,声明一个样式文件(*.css)
在.css中保存样式规则
使用步骤
1.创建样式表文件.css
2.在css文件中编写样式规则
3.在网页的头部引入css文件
<link href="css的url" rel="stylesheet">
CSS特性
继承性
大部分的css效果是可以直接被继承的。
必须父子结构(有层级嵌套),子继承父
层叠性
可以为一个元素定义多个样式规则
规则中属性不冲突(不重复)时,多个样式可以同时应用到当前元素上
优先级
如果多个样式声明冲突,按照样式规则的优先级应用样式。
最高:内联样式
内部样式和外部样式,就近原则
最低:浏览器默认样式
调整样式优先级
!important规则
放在属性值之后,与值之间用空格隔开
作用:调整优先级,使用之后优先级提升
基础选择器(重点**********)
选择器的作用
规范了页面中哪些元素能够使用定义好的样式,的条件
为了匹配元素
选择器详解
1.通用选择器
匹配页面上所有的元素
*{样式声明}
效率极低,项目中少用,
唯一使用的方式
*{margin:0;padding:0}所有元素内外边距清0
2.元素选择器,标签选择器
设置页面中某种元素的默认样式
div{}
p{font-size:12px;}
3.id选择器
设置指定id元素的样式(专属的定制)
#d1{color:red;}
<div id="d1"></div>
4.类选择器
定义页面上某个或者某类元素的样式(公共样式,谁想用都可以)
.类名{样式声明}
<any class="类名"></any>
注意:类名
1.点不能省略
2.不能以数字开头
3.不能包含特殊字符(除了- _)
多类选择器
让一个元素引用多个类选择器,多个类名之间使用空格隔开
分类选择器 将元素选择器和类选择结合的一种使用方式 元素选择器.类选择器{样式声明}
<h4 class="my_font">
h4.my_font{background:pink;}
特点:
1.指向更精准
2.优先级更高
5.群组选择器
将多个选择器放到一起定义公共的样式
选择器1,选择器2,选择器3,…{样式声明}
div,p,#s1,p.my_font{
color:#006699;
background:#990066;
}
6.后代选择器
通过元素的后代关系匹配元素
后代:一级或者多于一级的嵌套关系
语法:选择器1 选择器2 选择器3…{样式的声明}
7.子代选择器
通过元素的子代(一级嵌套)关系匹配元素
选择器1>选择器2>选择器3…{样式声明}
8.伪类选择器
匹配元素的不同状态的选择器
选择器:伪类选择器{} 在这个标签的某一个状态下,才应用此样式
8.1链接伪类
a:link{color:red;}没有被访问过的状态
a:visited{color:pink;}被访问之后的状态
8.2动态伪类
a:active{font-style:italic;}元素被激活状态
input:focus{background:black;color:white;}匹配元素获取焦点时
img:hover{width:100px;}匹配元素被鼠标悬停时
9.选择器的权值
权值,表示当前选择器的重要程度,权值越大优先级越高
!important >1000
内联样式 1000
id选择器 100
类和伪类 10
元素选择器 1
*通用选择器 0
继承的样式 无
1.当一个选择器含有多个选择器时,需要将所有的选择器的权值进行相加
然后再比较,权值高的优先级高
2.分组选择器权值不相加,单独计算
3.权值的计算不会超过其最大数量(100个1加在一起,不会大于一个10)
4.样式后面添加!important,该样式直接获得最高优先级
内联样式不能添加!important
5.权值相同,按照就近原则
尺寸和边框
尺寸属性
width
最大宽度max-width
最小宽度min-width
height
max-height
min-height
取值:
1.以px为单位的数字
2.%,相对单位,占据父元素尺寸的百分比
总结:页面中允许设置尺寸的元素
1.所有的块级元素都可以设置
2.行内块都可以设置
input(单选框和复选框不能设置)
3.本身具有width和height属性的元素,可以设置
table,img
大部分的行内元素都不允许设置尺寸
附加知识点 单位
1.px 像素
2.in 英寸 1in=2.54cm
3.pt 磅值,一般修饰字体大小 1pt=1/72in
4.cm
5.mm
6.em 相对于父级设置的尺寸乘以的倍数(1.5em)
7.rem相对于根元素设置的尺寸乘以的倍数(1.5rem)
8.%
附加知识点 合法颜色值
1.颜色的英文单词 red blue yellow gray …
2.#rrggbb 取值 16进制 r:0~ff g:0~ff b:0~ff
3.#aabbcc 简写成#abc
4.rgb(0255,0255,0~255);
5.rgb(r%,g%,b%);
6.rgba(r,g,b,a)
a:alpha 透明度(0-1) 1:不透明 0:透明
尺寸和属性
尺寸属性
溢出处理
当内容多,元素区域小的时候,就会产生溢出效果
默认都是纵向溢出的
属性 overflow/overflow-x/overflow-y
取值:
1.visible 默认值,溢出可见
2.hidden 溢出部分隐藏
3.scroll 显示滚动条,不管是否溢出都显示滚动条
只有在溢出时,滚动条可用
4.auto 自动,溢出方向有滚动条,没溢出的方向没有滚动条
如果想显示成横向溢出
需要在内容和容器之前再套一层容器
内部容器宽度要比外部容器宽
边框
1.border:width style color;
width:边框的宽度
style:边框的样式
取值:solid 实线
dotted 虚线(圆点)
dashed虚线(线)
double 双实线
color:边框颜色,合法的颜色值,支持透明色(transparent)
border直接设置上右下左4个方向的边框
取消边框 border:none/0;
2.单边定义
只设置某一条边的3个属性
border-top/right/bottom/left:width style color;
3.单属性定义
border-color:#00f;
border-style:dashed;
border-width:10px;
4.单边单属性定义(12个)
border-top/right/bottom/left-width/style/color:
5.边框的倒角
把直角变成圆角
border-radius:
取值:
1.以px为单位的数字
2.% 50%设置圆形
单角设