一、CSS的基本概念（使用CSS让单调的HEML网页更富表现力：文档体积小，便于搜索，可读性好 分层思想HTML+CSS 结构和表现分离 ，易于维护和管理）
CSS的基本概念：CSS是层叠样式表(Cascading Style Sheet) ,用于控制网页的外观。
二、Css选择器
css选择器，也称为选择符，用于选择需要添加样式的元素
css的基本语法:
选择器{
属性:属性值; （样式规则：键值对）
…}
1.全局选择器 通配符 通用
①全局选择器：设置所有标签使用同一样式，用*表示
全局选择器语法：*{}
②组合选择器：
H1,h2,h3,h4,h5,p{
}
h.special,special,#one{
text-decoration:underline;//下划线
}
③后代选择器：
/查找p元素的后代span元素 空格就是后代/
p span{
color: green;
}
i span{
color: red;
}
.pcolor #my{
color: lightskyblue;
font-size: 50px;
}
</style>
<p id="my" class="pcolor">段落1</p>
<p class="pcolor"><span id="my">后代元素</span></p>
<p>段落2</p>
<p>开心<span>y<i>u<span>yang</i></span></span>快乐</p>
④子元素选择器：
语法：
选择器1>选择器2>…{
//样式规则
}
<style type="text/css">
p>i{
color: red;
}
</style>
<p>lalal</p>
<p>不<i>爱你</i></p>
⑤嵌套选择器：
选择器1 选择器2{….}
P b{
Color:bule;
}
<p>嵌套使<b>用<b>CSS</b></b>标记的方法</p>
嵌套之外的<b>标记</b>不生效
2.标签选择器（元素选择器）：
标签选择器：用于声明标记采用的样式。
例如，p选择器用于声明所有p标签的样式，同样也可用h1选择器来声明页面中所有h1标签的样式。
标签选择器的语法：
E Selector{
{ property:value1;
property:value1;
样式规则
}
}
特点：选择的面比较广，不是最灵活。可以对多个标签同事进行组合声明
p{}直接给标签设置样式的就是标签选择器
3.类选择器（样式名选择器）
类选择器：class 用来为一系列标签定义相同的样式。
例如：当声明了p标签为红色时，页面中的所有p标签都显示为红色，如果希望其中的几个不是红色，就需要使用类别选择器 。
类选择器的语法: E.类名{样式规则}
在网页中书写css代码:
.red{ color:red;}
给h1标签和第三个p标签引入类别选择器red， html代码：
<h1 class="red">我是标题红色</h1>
<p>我是段落红色</p>
<p>我是段落红色</p>
<p class="red">我是段落红色</p>
特点：一个元素可以使用多个类选择器，不同的规则可叠加，可穿两个样式，相同的功能看优先级：p.color范围比.color范围小，所以冲突使用p.color。比较灵活。
4.ID选择器（行内样式）
ID选择器和类选择器类似，但要注意同一id名在同一个页面中只能出现一次。(具有唯一性)
ID选择器的语法: #id名{}
5.伪类选择器
a:link（未被访问过,访问之前的状态）
a:hover （鼠标滑过） a:hover{text-decoration: underline;}; 鼠标放上去后有下划线
a:active（鼠标按下）
a:visited(访问过后)
伪类选择器: 用伪类定义的样式并不是作用在标记上，而是作用在标记的状态上。
二、在html中使用css的方法【CSS引用方式】
1.行内样式
在标签后面写如：<p style=”color:red;font-size:36px”></p>
<h1 style=”font-size:10px;color；blue”>我是一级标题</h1>
行内样式表的应用方法：在html标记内，每个标签都使用style属性定义css样式。
注：在标签内部设置（style）样式，键值对用冒号隔开
2.内嵌样式 （内部样式）
在title下面写 标记声明的一种样式。
语法如下：
<style>
/*这里写css内容*/
</style>
Eg【所有的h1/p等标签都遵循样式规则 标签选择器：选中多有的h1标签】
<style type="text/css">
h1{
color: red;
font-size: 20px;
font-weight: bold;
font-style: italic;/*斜体*/
}
</style>
内部样式： 作用域小的优先级高，越具体的优先级越高 所以当内联和内部样式都有的时候，内联样式优先级高（专人专用，内部
很多名字相同的都可以用）
特点：
1）内部样式写在标签内，必须放在一个标签内
2）在一个页面中结构和样式做了分离
3）内部样式可以给这份html文档的元素使用，不能对外共享
3.链接样式 （外部样式） 在title下写link
外部样式文件的扩展名必须是.css,强调此文件中只能放样式内容，不可以有标签之类的。
样式内容：
h1{
color: red;
font-size: 20px;
font-weight: bold;
font-style: italic;/*斜体*/ }
链接样式表的应用方法：在外部定义css样式表，通过链接标记链接到页面中的一种样式。
（Href路径 rel样式 type类型）
语法：<link href="style.css" rel="stylesheet" type="text/css" />
外部样式【看搜狐网站】
特点：
一个外部样式可以给任意的html文档使用，一对多的关系，完全的分离
中大型网站使用频率高
4.导入样式 @import
导入样式的应用方法：采用导入样式的样式表，在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似于内嵌样式表效果。
语法：
<head>
<style type=”text/css”>
@import “1.css”
</style>
</head>
特点： 同外部样式一样
优先级：越具体优先级越高 实际要看先后顺序
行内样式>内嵌样式>链接样式
最好使用1-2种，避免“撞车”
三、文字属性
1.color字体颜色
color属性：用于定义文字的颜色。常用的表示方式有:颜色名称或十六进制，其他表示方式不要求掌握。
2.font-size字号
font-size属性:设置文字的大小。 属性值只要求数字加单位，可以是百分比，其他不需要掌握。常用的网页文字大小有12px(正文)、14px（标题）
执行步骤
html代码
<p>我是段落标签,我变成了12像素的文字哦，网页常用的文字大小为12px和14px,要记得哦！</p>
css代码：p{font-size:12px;}
3.font-family字体： “黑体”“宋体”“微软雅黑” 首先执行第一个字体
font-family属性：设置字体，如宋体、黑体、隶书等。字体的表示方式只要求掌握字体名称，其他不要求掌握。
执行步骤
html代码
<p>我是段落标签,我被设置成宋体,宋体是网页中常用的字体！</p>
css代码：
p{font-family:宋体; }
4.font-weight字体加粗
bold、bolder、600-900加粗
normal普通字体100-500
font-weight属性设置文字的粗细程度，属性值只要求掌握bold和normal、其他不要求掌握。
bold 设置粗体
normal将粗体改为正常字体
执行步骤
给第一个h2标签和p标签分别添加类别选择器normal、bold，html代码：
<h2 class="normal1">我是二级标题，我正常显示了 </h2>
<h2>我也是二级标题</h2>
<p class="bold1">我是段落标签,我被加粗了</p>
<p>我也是段落标签</p>
css代码：
body{ color:#FF0000;}
.normal{ font-weight:normal;}
.bold{ font-weight:bold;}
5.font-style字体倾斜（倾斜方式： i em address font-style ）
italic倾斜
normal普通字体
四、段落属性
1.文字修饰（text-decoration）:p默认情况下是text-decoration：none；
underline下划线
overline 上划线
line-through删除线
none 无修饰
text-decoration属性是文本修饰属性。属性值有underline下划线、none 无修饰、overline 上划线、line-through删除线。常用属性值underline和none，即如何为文本设置下划线，如何为带有下划线的超链接文本去掉下划线，
如：p{text-decoration:underline;}
a{text-decoration:none;}
2.水平对齐方式（text-align） 默认 left
text-align属性：设置文本的水平对齐方式。属性值可以设置为left、center、right等，即如何为文本设置左对齐、居中对齐和右对齐，其他值不要求掌握。
如：h2{ text-align:center;}
3.文本缩进（text-indent） 假如设置一个比较大的负数，可以做出文字消失效果
text-indent属性：设置文本块中首行的缩进，属性值可设置为数值加单位或者用em设置缩进几个字，百分比和负值不要求掌握。-2em
如：p{text-indent:24px} 或 p{text-indent:2em;}
4.文本行高 (line-height) 如果line-height 和 height的值一样，则可以做出文字垂直居中效果
line-height属性：设置行间距，即行高。属性值可设置为数值加单位，百分比和负值，负值不要求掌握。
如：p{line-height:25px;}
5.边框属性【块级标签】
#yy{
border-style: dashed;/*边框虚线 实心 solid */
border-width: 2px;
border-color: blue;
height: 100px;
width: 100px;
border-top-style: solid;/*顶部边框样式
}
div.love{/*圆角边框*/
border: 1px solid red;
height: 100px;
width: 100px;
border-radius: 50px;/*边框圆角半径 50 就是园了*/
box-shadow: 10px 10px 2px red;/*盒子的阴影*/ box-shadow: 0px 0px 10px #000000;/*黑色无偏移量*/
}
<p class="show"> hello,my name is yolanda</p>
<div id="yy"></div>
<div class="love">ai </p>
也可以对图片设置<img src=””>
img样式规则{}
可以简写：
Border:2px solid red; boder-left:2px dashed bule;
Height:100px; boder-bottom:2px solid red;
Width:100px;
五、背景属性background
背景属性包含背景色，背景图，背景重复，背景位置，背景附件和背景复合属性等。
背景颜色background-color
背景图片background-image:url();
背景重复：background-repeat:
属性值：repeat/no-repeat/repeat-x/repeat-y
背景位置：background-position:水平 垂直;
**怎么使背景图片居中？**
Background-position:center; 全选
Background-position:50% 50%;
Background-position:50% center;
Background-position:center 50%;
可以取的值为关键字，数值，百分比
水平：left center right（或者数值）
垂直：top center bottom（或者数值）
背景附件 （背景是否滚动 属性值：scroll（默认）滚动 fixed 固定）：background-attachment:fixed；
background复合属性在一个声明中设置所有的背景属性，如背景颜色、背景图像、背景重复及背景位置的设置，属性值的顺序可调换。
如：
background: red url(1.jpg) no-repeat right top;
body{
/*border: 1px; body也是容器
background-color: blue;
background-image:url(../img/logo.jpg);
background-repeat: no-repeat;
background-position: 80% bottom;
background-attachment: scroll;
*/
background: red url(../img/logo.jpg) no-repeat 20px 20px scroll;
六、盒模型
包括4： border+padding+margin+width（height）
1.边框属性
边框颜色Border-color如：border-color:red;
边框样式border-style,常用边框样式：solid 实线、dashed 虚线、dotted 点线、none 取消线
边框宽度border-width如border-width:3px;
border复合属性可同时设置边框的宽度、样式和颜色， 如：border: #666 solid 1px;
单独设置一条边框如：上边框border-top，右边框border-right，下边框border-bottom，左边框border-left
如:border-bottom:1px #ff0000 dashed;
注意：
四边边框和上下左右某一边的边框都使用复合属性设置：如border-top：1px solid #ccc，而border-top-style，border-top-width ， border-top-color等单独设置某一边样式、宽度、颜色等不要求掌握
2.内填充
padding：内容与边框之间的距离。
设置上内填充padding-top属性，右内填充padding-right属性，下内填充padding-bottom属性，左内填充padding-left属性，设置上下左右某一边的内填充。用长度加单位设置属性值如：padding-left：200px;
3.外边距
margin：元素与元素之间的距离。
上外边距margin-top属性，右外边距margin-right属性，下外边距margin-bottom属性，左外边距margin-left属性，设置上下左右某一边的外边距。用长度加单位设置属性值如：margin-left：200px;
margin复合属性设置所有外边距属性，用法和padding类似。
另外属性值只要求掌握数值加单位和auto，百分率和负值不要求掌握
使用盒模型布局搭建布局色块
在网页中插入网页主体div，并设置不同类名，书写css设置宽高背景，搭建布局色块，并利用margin：0 auto设置居中效果。
4.复合属性
padding复合属性设置所有内填充属性，用法如下：
属性值为一个数值如padding:10px,表示上右下左内填充都为10px
属性值为二个数值如padding:10px 20px,表示内填充上下都为10px，左右都为20px
属性值为三个数值如padding: 10px 20px 30px,表示内填充上为10px，左右为20px，下为30px
属性值为四个数值如padding: 10px 20px 30px 40px,表示上右下左，内填充为上为10px，右为20px，下为30px，左为40px
margin复合属性设置所有外边距属性，用法如下：
属性值为一个数值如margin:10px,表示上右下左都为10px
属性值为二个数值如margin:10px 20px,表示外边距上下都为10px，左右都为20px
属性值为三个数值如margin: 10px 20px 30px,表示外边距上为10px，左右为20px，下为30px
属性值为四个数值如margin: 10px 20px 30px 40px,表示上右下左，外边距为上为10px，右为20px，下为30px，左为40px
5.对元素宽高的影响
padding对元素宽高的影响
素设置宽高后，再设置padding将会影响盒子的实际大小。
盒子的实际宽=width+padding-left+padding-right+border
盒子的实际高=height+padding-top+padding-bottom+border
扩展：
一、什么是网页布局
网页布局是指网页内容在页面上所处位置的设计。
二、浮动float属性 none(不浮动) left（左浮动） right（右浮动）
设置元素向哪个方向浮动，常用属性值left和right，设置左浮动、右浮动
案例：
实现代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div.a{
border-style: solid;
border-width: 3px;
border-color: white;
height: 50px;
width: 2000px;
background-color: #09c7dd;
}
div.b{
border-style: solid;
border-width: 3px;
border-color: white;
height: 30px;
width: 2000px;
background-color: yellow;
}
div.c{
border-style: solid;
border-width: 3px;
border-color: white;
height: 180px;
width: 2000px;
background-color:#31ff09;
}
div.e{
height: 210px;
width: 2020px;
}
#ea{
border-style: solid;
border-width: 3px;
border-color: white;
height: 200px;
width: 400px;
background-color: #fcdc2f;
float: left;
}
#eb{
border-style: solid;
border-width: 3px;
border-color: white;
height: 200px;
width: 1600px;
background-color: #2efbac;
float: right;
}
div.d{
border-style: solid;
border-width: 3px;
border-color: white;
height: 30px;
width: 2000px;
background-color: #0decfb;
}
</style>
</head>
<body>
<div class="a">
heder
</div>
<div class="b">
nav
</div>
<div class="c">
banner
</div>
<div class="e">
<div id="ea">
left
</div>
<div id="eb">
right
</div>
</div>
<div class="d">
footer
</div>
</body>
</html>
304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
