Web前端——CSS复习1（3.25）
2017-03-25 21:26
441 查看
1、什么是CSS?
CSS是层叠样式表，又称级联样式表，简称样式表。
作用：CSS实现了html文档中元素的样式定义，
（1）实现了将内容与表现的分离；
（2）提高了地代码的可重用性和可维护性。
2、CSS与HTML之间的关系
首先，HTML用于构建网页的结构，CSS用于创建HTML元素的样式；
其次，HTML是页面的内容组成，CSS是页面的表现。
上述解决了“结构与样式相分离，内容与页面表现相分离”的问题。
3、使用CSS的方法
（1）内联样式：在html页面的内容中写样式
<h1 style="color:red">新世纪英语</h1>
优点：易于对内容各个部分进行设置样式
缺点：不利于样式的重用性
（2）内部样式：将css样式定义在网页的head里，放在一对style标记里
<style type="text/css">
h1{
color:red;
}
</style>
（3）外部样式：将css样式定义在一个独立的css样式里，然后链接在html文档里。
<head>
...
<link rel="stylesheet" type="text/css" href="basic.css"/>
</head>
4、CSS语法
（1）CSS语法规范
a、css语法规范总结
内联样式：由样式声明组成
b、css样式表特征
aa：继承性——大多数css样式规则可以被继承
bb：层叠性——首先，可以定义多个样式；其次，在不冲突时，多个样式表中的样式可层叠为一个
cc：优先级——在样式定义冲突时，按照不同样式规则的优先级来应用样式
c、样式优先级高低（aa < bb < cc）
aa：浏览器缺省设置
bb：外部样式表或内部样式表——就近优先
cc：内联样式
优先级案例——
<head>
..
<link rel="stylesheet" type="text/css" href="basic.css"/>
..
</head>
<body>
<h1>标题1</h1>
<p>正文1</p>
<h1 style="color:black">标题2</h1>
</body>
basic.css样式为：body{
color:red;
}
h1{
color:pink;
}
p{
color:yellow;
}
结果：标题1显示“pink”，正文1显示“yellow”，标题2显示“black”
d、!important规则
aa：采用!important可以调整样式规则的优先级
bb：将!important添加在样式规则之后，中间用空格隔开
——选择器{属性：属性值 !important}
cc：谨慎使用
<style type="text/css">
h1{
color:blue !important;
color:puple;
}
</style>
（2）CSS选择器
A：基础选择器
a、通用选择器（*）
b、元素选择器（p、span、h1）
c、类选择器（."class名"）
d、id选择器（#"id名"）
总结：优先级——通用 <元素 <类 <id
B：复合选择器
a、群组选择器（用“，”隔开）
选择器声明以逗号隔开的选择器列表
将一些相同的规则作用于多个元素。
（“元素选择器”与“类选择器”混合，“类选择器”与“id选择器”，“元素选择器”与“id选择器”）
b、后代选择器（“儿子或孙子”）
指的是某父元素中的所有后代子元素（儿子辈+孙子辈）
依据元素在其位置的上下文关系来定义样式；
作用：用于选择某一元素的后代元素。
案例如下——
<h1>
<span>标题<span>
</h1>
样式为：
h1{color:green}
h1 span{color:red;}
c、子代选择器（“儿子”）
指的是某父元素中的直接子选择器
div >span{...}
C.伪类选择器
伪类用于向某些选择器添加特殊的效果
使用方法：采用冒号（:）作为结合符，结合符左边的是其他选择器，右边是伪类
“选择器:伪类”
CSS伪类选择器可以分为
（1）链接伪类——:link（尚未访问的链接）
:visited（访问过的链接）
注意：该链接伪类仅适用类似于“<a></a>”文字链接属性中，对于div并不适合。
（2）动态伪类，用于呈现用户操作
:hover（当鼠标悬停在所指定的元素上所使用的样式）
:active（当所指定的元素处于激活状态，鼠标在元素上按下还没有松开）
:focus（适用于html元素获得焦点时）
例如“input:focus{color:red;}”表示点进去时的样式
总结：
a、选择器优先级——
根据比较选择器权值的大小，进而判断优先级的高低。
元素选择器（权值为1）< 类选择器（权值为10）< 伪类选择器（）
< id选择器（权值为100）< 内联选择器（权值为1000）
b、选择器效率——
根据出现的频率，进而判断效率高低
id选择器 > 类选择器
（3）CSS规则
A.尺寸与边框
a、尺寸单位——%(百分比)：子元素占父元素的百分比
pt(磅)：1pt等于1/72英寸
px(像素)：计算机屏幕上的一个点
em(字体尺寸)：1em等于当前的字体尺寸，2em等于当前尺寸的两倍
（注意：屏幕一般为9pt，字体一般设置为14px）
b、颜色单位——RGB(R—red G—green B—blue)
表示色光三原色（红绿蓝）
2进制：0,1,10,11,100...
16进制：0,1,2，...,9,a,b,...f
（注意：若r=g=b，全为0为“黑”，全为f为“白”，越接近f越浅，越接近0越深）
c、尺寸——
尺寸属性是用于设置元素的宽度和高度
aa：width——max-width/min-width
bb：height——max-height/min-height
d、溢出
使用尺寸属性控制框的大小时，如果内容所需空间>框本身的空间，会导致溢出。
（1）overflow：当元素溢出框时如何处理
aa——overflow:visible 溢出的内容可见
bb——overflow:hidden 溢出的内容被隐藏
cc——overflow:scroll 无论任何情况均显示滚动条
dd——overflow:auto 浏览器自动判断，需要滚动条即显示，不需要即不显示
此外，还有两种分为水平方向、垂直方向
（2）overflow-x：水平方向元素溢出框
（3）overflow-y：垂直方向元素溢出框
<div id="chuchuang">
<p>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
</p>
</div>
设置其css样式，
#chuchuang{
width:400px;
height:300px;
border:1px solid #000;
overflow-x:auto;
overflow-y:hidden;
}
#chuchuang p{
width:500px;
}
img{
width:100px;
}
e、边框
简写方式——border:width style color
若要隐藏边框，可以设置
border-right:none;
border-bottom:transparent;
（border-right:none表示效率最高）
扩展——
aa：边框圆角border-radius
bb：边框阴影
box-shadow：h-shadow v-shadow blur spread color inset
例如：box-shadow:0px 0px 5px 1px red;
cc：图片边框
border-image：source width repeat/round/stretch
表示将图片规定为包围div元素的边框
dd：轮廓
它是绘制元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
简写方式——
outline：color style width
可以去掉chrome默认的表单元素的蓝边——outline:0/none
5、框模型、背景、渐变
（1）框模型
框模型容器container包括：margin（外边距）、padding（内边距）、border（边框）、width/height
其中，width、height指内容区域的宽度和高度；
增加内边距、边框、外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
计算公式——
对象实际宽度=（左右）侧外边距+（左右）侧边框+（左右）侧内边距+宽度
CSS是层叠样式表，又称级联样式表，简称样式表。
作用：CSS实现了html文档中元素的样式定义，
（1）实现了将内容与表现的分离；
（2）提高了地代码的可重用性和可维护性。
2、CSS与HTML之间的关系
首先，HTML用于构建网页的结构，CSS用于创建HTML元素的样式；
其次，HTML是页面的内容组成，CSS是页面的表现。
上述解决了“结构与样式相分离，内容与页面表现相分离”的问题。
3、使用CSS的方法
（1）内联样式：在html页面的内容中写样式
<h1 style="color:red">新世纪英语</h1>
优点：易于对内容各个部分进行设置样式
缺点：不利于样式的重用性
（2）内部样式：将css样式定义在网页的head里，放在一对style标记里
<style type="text/css">
h1{
color:red;
}
</style>
（3）外部样式：将css样式定义在一个独立的css样式里，然后链接在html文档里。
<head>
...
<link rel="stylesheet" type="text/css" href="basic.css"/>
</head>
4、CSS语法
（1）CSS语法规范
a、css语法规范总结
内联样式：由样式声明组成
b、css样式表特征
aa：继承性——大多数css样式规则可以被继承
bb：层叠性——首先，可以定义多个样式；其次，在不冲突时，多个样式表中的样式可层叠为一个
cc：优先级——在样式定义冲突时，按照不同样式规则的优先级来应用样式
c、样式优先级高低（aa < bb < cc）
aa：浏览器缺省设置
bb：外部样式表或内部样式表——就近优先
cc：内联样式
优先级案例——
<head>
..
<link rel="stylesheet" type="text/css" href="basic.css"/>
..
</head>
<body>
<h1>标题1</h1>
<p>正文1</p>
<h1 style="color:black">标题2</h1>
</body>
basic.css样式为：body{
color:red;
}
h1{
color:pink;
}
p{
color:yellow;
}
结果：标题1显示“pink”，正文1显示“yellow”，标题2显示“black”
d、!important规则
aa：采用!important可以调整样式规则的优先级
bb：将!important添加在样式规则之后，中间用空格隔开
——选择器{属性：属性值 !important}
cc：谨慎使用
<style type="text/css">
h1{
color:blue !important;
color:puple;
}
</style>
（2）CSS选择器
A：基础选择器
a、通用选择器（*）
b、元素选择器（p、span、h1）
c、类选择器（."class名"）
d、id选择器（#"id名"）
总结：优先级——通用 <元素 <类 <id
B：复合选择器
a、群组选择器（用“，”隔开）
选择器声明以逗号隔开的选择器列表
将一些相同的规则作用于多个元素。
（“元素选择器”与“类选择器”混合，“类选择器”与“id选择器”，“元素选择器”与“id选择器”）
b、后代选择器（“儿子或孙子”）
指的是某父元素中的所有后代子元素（儿子辈+孙子辈）
依据元素在其位置的上下文关系来定义样式；
作用：用于选择某一元素的后代元素。
案例如下——
<h1>
<span>标题<span>
</h1>
样式为：
h1{color:green}
h1 span{color:red;}
c、子代选择器（“儿子”）
指的是某父元素中的直接子选择器
div >span{...}
C.伪类选择器
伪类用于向某些选择器添加特殊的效果
使用方法：采用冒号（:）作为结合符，结合符左边的是其他选择器，右边是伪类
“选择器:伪类”
CSS伪类选择器可以分为
（1）链接伪类——:link（尚未访问的链接）
:visited（访问过的链接）
注意：该链接伪类仅适用类似于“<a></a>”文字链接属性中，对于div并不适合。
（2）动态伪类，用于呈现用户操作
:hover（当鼠标悬停在所指定的元素上所使用的样式）
:active（当所指定的元素处于激活状态，鼠标在元素上按下还没有松开）
:focus（适用于html元素获得焦点时）
例如“input:focus{color:red;}”表示点进去时的样式
总结：
a、选择器优先级——
根据比较选择器权值的大小，进而判断优先级的高低。
元素选择器（权值为1）< 类选择器（权值为10）< 伪类选择器（）
< id选择器（权值为100）< 内联选择器（权值为1000）
b、选择器效率——
根据出现的频率，进而判断效率高低
id选择器 > 类选择器
（3）CSS规则
A.尺寸与边框
a、尺寸单位——%(百分比)：子元素占父元素的百分比
pt(磅)：1pt等于1/72英寸
px(像素)：计算机屏幕上的一个点
em(字体尺寸)：1em等于当前的字体尺寸，2em等于当前尺寸的两倍
（注意：屏幕一般为9pt，字体一般设置为14px）
b、颜色单位——RGB(R—red G—green B—blue)
表示色光三原色（红绿蓝）
2进制：0,1,10,11,100...
16进制：0,1,2，...,9,a,b,...f
（注意：若r=g=b，全为0为“黑”，全为f为“白”，越接近f越浅，越接近0越深）
c、尺寸——
尺寸属性是用于设置元素的宽度和高度
aa：width——max-width/min-width
bb：height——max-height/min-height
d、溢出
使用尺寸属性控制框的大小时，如果内容所需空间>框本身的空间，会导致溢出。
（1）overflow：当元素溢出框时如何处理
aa——overflow:visible 溢出的内容可见
bb——overflow:hidden 溢出的内容被隐藏
cc——overflow:scroll 无论任何情况均显示滚动条
dd——overflow:auto 浏览器自动判断，需要滚动条即显示，不需要即不显示
此外，还有两种分为水平方向、垂直方向
（2）overflow-x：水平方向元素溢出框
（3）overflow-y：垂直方向元素溢出框
<div id="chuchuang">
<p>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
</p>
</div>
设置其css样式，
#chuchuang{
width:400px;
height:300px;
border:1px solid #000;
overflow-x:auto;
overflow-y:hidden;
}
#chuchuang p{
width:500px;
}
img{
width:100px;
}
e、边框
简写方式——border:width style color
若要隐藏边框，可以设置
border-right:none;
border-bottom:transparent;
（border-right:none表示效率最高）
扩展——
aa：边框圆角border-radius
bb：边框阴影
box-shadow：h-shadow v-shadow blur spread color inset
例如：box-shadow:0px 0px 5px 1px red;
cc：图片边框
border-image：source width repeat/round/stretch
表示将图片规定为包围div元素的边框
dd：轮廓
它是绘制元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
简写方式——
outline：color style width
可以去掉chrome默认的表单元素的蓝边——outline:0/none
5、框模型、背景、渐变
（1）框模型
框模型容器container包括：margin（外边距）、padding（内边距）、border（边框）、width/height
其中，width、height指内容区域的宽度和高度；
增加内边距、边框、外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
计算公式——
对象实际宽度=（左右）侧外边距+（左右）侧边框+（左右）侧内边距+宽度
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Web前端——CSS复习(3.27-3.31)
- Web 前端优化最佳实践之 CSS 篇
- [CSS]Web前端开发之CSS工具列表
- 收集Web前端 面试题 HTML+CSS部分
- Web编程前端之4：css+div多样式可定制完美分页全攻略
- Web 前端开发者必知的9 个 CSS 属性
- Web 前端优化最佳实践之 CSS 篇
- WEB前端底层知识之浏览器是如何工作的(4)--Render树与CSS解析
- Web 前端开发者必知的9 个 CSS 属性
- Web编程前端之4：css+div多样式可定制完美分页全攻略
- web前端开发之Css
- [CSS]Web前端开发之CSS工具列表 （转）
- 【Web前端】CSS div居中显示
- Web前端开发：DIV+CSS网页布局总结
- [Web前端]CSS实现“不可选择，不可复制”面临的问题
- 分享个WEB前端CSS兼容的问题.
- Web前端开发规范文档(css/javascript)
- Web前端学习笔记（二）——CSS中的选择符
- Web 前端开发者必知的9 个CSS属性
- WEB前端底层知识之浏览器是如何工作的(4)--Render树与CSS解析