一、 CSS的基本概念（使用CSS让单调的HEML网页更富表现力：文档体积小，便于搜索，可读性好 分层思想HTML+CSS 结构和表现分离 ，易于维护和管理）
CSS的基本概念：CSS是层叠样式表(Cascading Style Sheet) ,用于控制网页的外观。指颜色 背景 大小元素定位…
四、Css选择器
css选择器，也称为选择符，用于选择需要添加样式的元素
css的基本语法:
选择器{
属性:属性值; （样式规则：键值对）
…}
- 全局选择器 通配符 通用 权重 0
全局选择器：设置所有标签使用同一样式，用表示
全局选择器语法:{}
显示效果：
html代码：
我是标题红色
我是段落红色
css代码： *{ color:red;} ！结构和样式分离：分工明确，操作简单 组合选择器： H1,h2,h3,h4,h5,p{ } h.special,special,#one{ text-decoration:underline;//下划线 } 后代选择器：Y
Y
Y
Y
Y
我是标题红色
我是段落红色
我是段落红色
我是段落红色
5. 伪类选择器 a:link（未被访问过,访问之前的状态） a:hover （鼠标滑过） a:hover{text-decoration: underline;}; 鼠标放上去后有下划线 a:active（鼠标按下） a:visited(访问过后) 伪类选择器: 用伪类定义的样式并不是作用在标记上，而是作用在标记的状态上。 我们这里只要求掌握超链接的伪类a：hover。 伪类选择器的语法: a:hover{ } a:active{ a:visited{ color: gray; }
color: greenyellow;
font-size: 100px;
}
显示效果:
执行步骤
html代码
公司首页
公司新闻
产品展示
练习我们
css代码：
a { color:red;}
a:hover{ color:yellow;}
优先级：id>class>标签>全局
权重值：
Style 1000
Id 100
Class 10
标签（p）1
全局（*）0
(标签选择器的一种)派生选择器(包含选择器)：html div {} p a{}
三、在html中使用css的方法【CSS引用方式】
行内样式 在标签后面写如：
-
<h1 style=”font-size:10px;color；blue”>我是一级标题</h1>
行内样式表的应用方法：在html标记内，每个标签都使用style属性定义css样式。
注：在标签内部设置（style）样式，键值对用冒号隔开
内联样式（行内样式）
特点：专人专用，不能共享【就近原则】
缺点：结构和表现没有做分离，页面的代码比较多，维护和管理麻烦
2. 内嵌样式 （内部样式） 在title下面写 标记声明的一种样式。
语法如下：
Eg【所有的h1/p等标签都遵循样式规则 标签选择器：选中多有的h1标签】
内部样式： 作用域小的优先级高，越具体的优先级越高 所以当内联和内部样式都有的时候，内联样式优先级高（专人专用，内部
很多名字相同的都可以用）
特点：
1）内部样式写在标签内，必须放在一个标签内
2）在一个页面中结构和样式做了分离
3）内部样式可以给这份html文档的元素使用，不能对外共享
3. 链接样式 （外部样式） 在title下写link
外部样式文件的扩展名必须是.css,强调此文件中只能放样式内容，不可以有标签之类的。
样式内容：h1{
color: red;
font-size: 20px;
font-weight: bold;
font-style: italic;/斜体/ }
链接样式表的应用方法：在外部定义css样式表，通过链接标记链接到页面中的一种样式。
（Href路径 rel样式 type类型）
语法：
外部样式【看搜狐网站】
特点：
一个外部样式可以给任意的html文档使用，一对多的关系，完全的分离
中大型网站使用频率高
4. 导入样式 @import
导入样式的应用方法：采用导入样式的样式表，在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似于内嵌样式表效果。
语法：
特点：同外部样式一样
优先级：越具体优先级越高 实际要看先后顺序
行内样式>内嵌样式>链接样式
最好使用1-2种，避免“撞车”
一、 文字属性
- color字体颜色
color属性：用于定义文字的颜色。常用的表示方式有:颜色名称或十六进制，其他表示方式不要求掌握。
2. font-size字号
font-size属性:设置文字的大小。 属性值只要求数字加单位，可以是百分比，其他不需要掌握。常用的网页文字大小有12px(正文)、14px（标题）
显示效果
执行步骤
html代码
我是段落标签,我变成了12像素的文字哦，网页常用的文字大小为12px和14px,要记得哦！
css代码：p{font-size:12px;}- font-family字体： “黑体”“宋体”“微软雅黑” 首先执行第一个字体
font-family属性：设置字体，如宋体、黑体、隶书等。字体的表示方式只要求掌握字体名称，其他不要求掌握。
显示效果
执行步骤
html代码
我是段落标签,我被设置成宋体,宋体是网页中常用的字体！
css代码： p{font-family:宋体; }- font-weight字体加粗
bold、bolder、600-900加粗
normal普通字体100-500
font-weight属性设置文字的粗细程度，属性值只要求掌握bold和normal、其他不要求掌握。
bold 设置粗体
normal将粗体改为正常字体
显示效果
执行步骤
给第一个h2标签和p标签分别添加类别选择器normal、bold，html代码：
我是二级标题，我正常显示了
我也是二级标题
我是段落标签,我被加粗了
我也是段落标签
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;}
代码：
p.show{
color:red;
font-family: sans-serif;
letter-spacing: 29px;/字母之间的间距/
word-spacing: 3px;
font-size: 30px;
border: 1px solid red;
line-height: 150px;
text-align: center;/对齐方式/
text-indent: 10px;/首行缩进/
text-transform: capitalize;/首字母/
text-shadow: 10px -10px 5px cornflowerblue;/文本阴影【第九单元】后面新增/
text-decoration: underline;
}
- 边框属性【块级标签】
#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;/黑色无偏移量/
}
hello,my name is yolanda
四、 列表案例符号的样式 list-style
list-style-type 定义列表前面的项目符号
Disc(实心圆)、circle(空心圆)、 square（方块）、 none（不使用任何标号）。
list-style-image 定义列表项标志的图像【设置了图片上面的不好用了最好上个属性设置成none】
语法格式如下：list-style-image:none|url(url)
list-style-position 列表位置
语法格式如下：list-style-position:outside（默认）|inside（）在列表li的里面还是外面
去掉列表案例符号的代码是: ul{list-style:none;}
- 列表
- 列表2
- 列表3
（6） 向网页中插入标签
（7） 在头部插入标签
（8） 设置div的尺寸属性：宽200像素，高100像素
（9） 利用border复合属性设置div的四周的5px、红色的实线边框
（10） 将下边框border-bottom改写为：3px、绿色的虚线边框
代码为：
Html代码： Css代码： div{ width:200px; height:100px; border:5px #FF0000 solid; border-bottom:3px #00FF00 dashed;}
- 案例2执行步骤:
（11） 向网页中插入标签
（12） 在div中插入图片
（13） 在头部插入标签
（14） 设置div的宽 、高和背景色；
（15） 设置div的内填充四边都为100px
（16） 设置div的左外边距为100px
代码为：
Html代码：
（17） 向网页中插入标签
,并设置不同id名（18） 设置div的宽 、高和背景色；
（19） 设置div居中
代码为：
Html代码：
Css代码：
#header{width:960px; height:78px; background:#f00;margin:0 auto;}
#nav{ width:960px;height:38px; background:#0f0; margin:0 auto;}
#banner{width:960px;margin:0 auto;}
#main{ width:960px; height:360px; background:#ff0; margin:0 auto;}
#footer{ width:960px;height:64px; background:#eaeaea; margin:0 auto;}
（1） 页面布局
（2） 设置基本样式
（3） 设置圆角边框：
（4） 设置盒子投影
（5） 设置背景渐变
（6） 设置文字投影
一. CSS3新增属性
- box-shadow属性盒子阴影
Box-shadow:2px 2px ;
（1） box-shadow属性的使用方法
在css3中，可以使用box-shadow属性让盒在显示时产生阴影效果。box-shadow属性的指定方法如下所示：
box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影颜色
box-shadow属性常用有5个参数设置，他们分别取值：
（2） 投影方式：
此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影；“outset”时，外阴影。
（3） X轴偏移量:
是指阴影水平偏移量其值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；
（4） Y轴偏移量:
是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；
（5） 阴影模糊半径：
此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
（6） 阴影颜色:
此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。
2. text-shadow属性文字阴影 没有inset
（1） text-shadow的使用方法
在CSS3中，可以使用在css3中，可以使用text-shadow属性让盒在显示时产生阴影效果。text-shadow的使用方法如下：
text-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径阴影颜色
（2） X轴偏移量 Y轴偏移量：
这两个参数为阴影离开文字的横方向位移距离和纵方向位移距离。使用text-shadow属性时必须指定这两个参数，可以对这两个参数指定负数值。
（3） 阴影的模糊半径
text-shadow:所使用的第三个参数是阴影的模糊半径，代表阴影向外模糊时的模糊范围。这个半径越大，则外阴影向外模糊的范围也就越大。
模糊半径参数为可选参数，省略这个参数时，该参数默认值为0，代表阴影不向外模糊。
（4） 阴影颜色
text-shadow属性所使用的参数中第四个参数是绘制阴影时所使用的颜色，该参数可以放置在其他三个参数之后，也可放在其他三个参数之前，成为第一个参数。该参数为可选参数，不对这个参数进行指定时，使用文字颜色。
3. border-radius属性
圆角边框的绘制也是web网站或web应用程序中经常用来美化页面效果的手法之一，在css3之前，需要使用图像文件才能达到同样效果。在css3中，只要使用border-radius属性指定好圆角的半径，就可以绘制圆角边框了。
（1） 指定一个半径：
border-radius：20px；
（2） 绘制四个角不同半径的圆角边框(正常读法正好相反的)
border-top-left-radius: 左上角半径
border-top-right-radius:右上角半径
border-bottom-right-radius:右下角半径
border-bottom-left-radius:左下角半径
- box-sizing属性
box-sizing属性，可以指定用width和height属性分别指定的宽度值和高度值是否包含元素的内部补白区域与边框的宽度和高度。
box-sizing属性的属性值为：content-box（默认值）和border-box
content-box属性值表示元素的宽度与高度不包括内部补白区域与边框的宽度与高度，border-box属性值表示元素的宽度与高度包括内部补白区域padding与边框的宽度与高度border。
Box-sizing的属性值(作用，计算盒子宽度) content-box (默认值)
Border-box
关键字
1.只包括自己 content-box
2. 不包括其他 border-box
3. border-box 包括padding+border
- text-overflow属性当对象内文本溢出时的显示
（1） 当对象内文本溢出时显示语法：
text-overflow ：clip | ellipsis
取值：
clip：（默认值）
不显示省略标记（…），而是简单的裁切。
：ellipsis
省略标记（…）
说明：
text-overflow属性仅是注解，当文本溢出时是否显示省略标记。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。
- gradient渐变
所谓渐变是指从一种颜色慢慢过渡到另外一种颜色。
（1） 绘制线性渐变
使用的代码如下：
Background:linear-gradient(to bottom,red,yellow);
第一个参数可指定的参数值如下：
参数值 渐变方向
To bottom 从上往下
To right 从左往右
To top 从下往上
To left 从右往左
第二个参数和第三个参数分别表示渐变的起点色和终点色。
（2） 兼容firefox浏览器的gradient
声明:由于CSS5标准还未完全订下来，所以各种内核的浏览器都有自己的标准，为了不使属性混淆，所以各家在各自标准前加了一个前缀
如：-moz-主要是firefox火狐
-webikt-主要是chrome谷歌/safari
-0-主要是opera
background:-moz-linear-gradient(top, red, blue);
（3） 兼容chrome浏览器的gradient
background:-webkit-linear-gradient(top,red, blue);
预览效果
一、 什么是网页布局
网页布局是指网页内容在页面上所处位置的设计。
二、 浮动float属性 none(不浮动) left（左浮动） right（右浮动）
4. 设置元素向哪个方向浮动，常用属性值left和right，设置左浮动、右浮动
314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
