层叠样式表（CSS），又称串样式列表，由W3C定义和维护的标准，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力
一、CSS 介绍
（一）、CSS的使用
使用CSS可以让结构(HTML)与表现（CSS）分离，方便维护
过去我们写网站都用table来布局，然后样式都直接加在table上面，这样一来页面显得特别的臃肿，然后想修改一下也显得非常困难
后来w3c推出了css，把结构和样式分离，html只负责结构，样式交给css来实现。这样一来开发者工作量和效率大大提升了，页面也变得更加容易维护，想要修改某个字体或者样式，直接在css文件中修改，不需要修改html结构。
（二）、基本语法
CSS语法有三个部分组成：选择器、属性、属性值
selector { property: value }
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个属性值组成。
属性（property）是希望设置的样式属性（style attribute）。每个属性有一个属性值（value）。属性和属性值被冒号分开
（三）、CSS的三种引用方式
在html样式中有三种css引用方式：内部样式、行间样式、外部样式
-
内部样式：在网页上创建嵌入的样式表
<style type="text/css"> body {background-color: red} </style> -
行间样式：应用内嵌样式到各个网页元素
<p style="color: red; margin-left: 20px">这是P标签</p> -
外部样式：将网页链接到外部样式表
<link rel="stylesheet" type="text/css" href="mystyle.css">
（四）、CSS选择器
-
常用选择器
-
标签选择器
标签选择器为HTML元素指定特定的样式
p { color: red; } -
类选择器
类选择器可以为标有特定class的HTML元素指定特定的样式
类选择器以“.”来定义。.red { color: red; } -
id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式
id选择器以“#”来定义。#red { color: red; } -
派生选择器
派生选择器允许你根据文档的上下文关系来确定某个标签的样式
/* 指定p标签下的span标签颜色为红色 */ p span { color: red; }
-
-
选择器分组
对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开
h1, h2, h3, h4, h5, h6 { font-size: 12px; } -
选择器继承
CSS继承是指被包在内部的标签拥有外部标签的样式性质。CSS的一个主要特征就是继承，它依赖于祖先-后代关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以用于它的后代
-
优先级
多重样式：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况
一般情况下，优先级如下：
（外部样式）<（内部样式）<（内联样式）-
优先权值：我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值
- 内联样表的权值最高为1000
- ID选择器的权值为100
- 类选择器的权值为10
- 元素选择器的权值为1
-
CSS 优先级法则
- 选择器都有一个权值，权值越大越优先
- 当权值相等时，后出现的样式表设置要优于先出现的样式表设置
- 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式
- 继承的CSS 样式不如后来指定的CSS 样式
- 在同一组属性设置中标有“!important”规则的优先级最大
-
二、CSS 字体
（一）、font-size
font-size: 设置文本字体的尺寸大小
-
属性值
{nummer}px：固定值尺寸像素{number}%：其百分比取值是基于父对象中字体的尺寸大小
-
示例
p { font-size: 20px; } p { font-size: 100%; }
（二）、font-family
font-family: 设置文本字体
-
属性值
name： 字体名称 ,按优先顺序排列,以逗号隔开.如果字体名称包含空格,则应使用引号括起
-
示例
p { font-family: Courier, "Courier New", monospace; }
（三）、font-style
font-style: 设置文本字体的样式
-
属性值
normal：默认值.正常的字体italic：斜体.对于没有斜体变量的特殊字体,将应用 obliqueoblique：倾斜的字体
-
示例
p { font-style: normal; } p { font-style: italic; } p { font-style: oblique; }
（四）、font-weight
font-weight: 设置文本字体的粗细
-
属性值
normal：默认值.正常的字体.相当于 400值大小bold：粗体，相当于700值大小bolder: 比 normal 粗lighter: 比 lighter 细{number}：设置文本字体的粗细大小，由用户端系统安装的字体的特定字体变量映射决定，系统选择最近值的匹配。也就是说，用户可能看不到不同值之间的差异
-
示例
p { font-weight: normal; } p { font-weight: bold; } p { font-weight: 600; }
（五）、color
color: 设置文本字体的颜色
-
属性值
name：颜色名称指定 colorrgb：指定颜色为RGB值{颜色16进制}:指定颜色为16进制
-
示例
p { color: red; } p { color: rgb(100,14,200); } p { color: #345678; }
（六）、line-height
line-height: 设置文本字体的行高。即字体最底端与字体内部顶端之间的距离
-
属性值
normal：默认值，默认行高{number}px：指定行高为长度像素{number}: 指定行高为字体大小的倍数
-
示例
p { line-height: normal; } p { line-height: 24px; } p { line-height: 1.5; }
（七）、text-decoration
text-decoration: 设置文本字体的修饰
-
属性值
normal：默认值，无修饰underline：下划线line-through: 贯穿线overline: 上划线
-
示例
p { text-decoration: underline; } p { text-decoration: line-through; } p { text-decoration: overline; }
（八）、text-align
text-align: 设置文本字体的对齐方式
-
属性值
left：默认值，左对齐center：居中对齐right: 右对齐
-
示例
p { text-align: left; } p { text-align: center; } p { text-align: right; }
（九）、text-transform
text-transform: 设置文本字体的大小写
-
属性值
none：默认值(无转换发生)capitalize：将每个单词的第一个字母转换成大写.uppercase: 转换成大写lowercase: 转换成小写
-
示例
p { text-transform: capitalize; } p { text-transform: uppercase; } p { text-transform: lowercase; }
（十）、text-indent
text-indent: 设置文本字体的首行缩进
-
属性值
{number}px：首行缩进number 像素{number}em：首行缩进number 字符
-
示例
p { text-indent: 24px; } p { text-indent: 2em; }
三、CSS 背景
（一）、background-color
background-color: 设置对象的背景颜色
-
属性值
transparent：默认值(背景色透明){color}：指定颜色
-
示例
div { background-color: #666666; } div { background-color: red; }
（二）、background-image
background-image: 设置对象的背景图像
-
属性值
none：默认值(无背景图)url({url})：使用绝对或相对 url 地址指定背景图像
-
示例
div { background-image: none; } div { background-image: url('../images/pic.png') }
（三）、background-image
background-image: 设置对象的背景图像铺排方式
-
属性值
repeat：默认值(背景图像在纵向和横向平铺)no-repeat：背景图像不平铺repeat-x：背景图像仅在横向平铺repeat-y：背景图像仅在纵向平铺
-
示例
div { background-image: url('../images/pic.png'); background-repeat: repeat-y; }
（四）、background-position
background-position: 设置对象的背景图像位置
-
属性值
{x-number | top | center | bottom } {y-number | left | center | right }：控制背景图片在元素的位置：x轴 、y轴。其铺排方式为no-repeat
-
示例
div { background-image: url('../images/pic.png'); background-repeat: no-repeat; background-position: 50px 50px; }
（五）、background-attachment
background-attachment: 设置对象的背景图像滚动位置
-
属性值
scroll：默认值。背景图像会随着页面其余部分的滚动而移动fixed: 当页面的其余部分滚动时，背景图像不会移动
-
示例
body { background-image: url('../images/pic.png'); background-repeat: no-repeat; background-attachment: fixed; }
（六）、background
background简写属性：在一个声明中设置所有的背景属性
-
语法
background: color image repeat attachment position -
示例
body { background: #fff url('../images/pic.png') no-repeat fixed center center }
四、CSS 伪类选择器
（一）、超链接伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态
-
选择器
a:visited：已被访问状态a:link：未访问状态a:hover：鼠标悬停状态a:active：用户激活
-
语法
a:link { color: green; } /*link:未访问的链接*/ a:visited { color: blue; } /*visited：已访问的链接*/ a:hover { color: red; } /*hover:当鼠标移动到链接上，则改变成红色*/ a:active { color: yellow; } /*active:当你鼠标选定该元素，则改变成黄色*/
（二）、表单:focus
:focus表单获得焦点时触发样式
input:focus { background-color: yellow; }
（三）、:first-child
:first-child 伪类来选择元素的第一个子元素
p:first-child {font-weight: bold;}
（四）、:lang
:lang 伪类允许您为不同的语言定义特殊的规则
<p><span lang="no">指定lang属性</span></p>
<style>
span:lang(no) { color: red; }
</style>
五、CSS 属性&&关系选择器
（一）、属性选择器
属性选择器可以根据元素的属性及属性值来选择元素
-
Elector[attr]
Elector[attr]：选择具有attr属性的Elector元素<div title='标题'>div标签</div> <style> div[title] { color: red; } </style> -
Elector[attr=val]
Elector[attr=val]：选择具有attr属性且属性值等于val的Elector元素<input type='text' /> <style> input[type='text'] { background: red; } </style> -
Elector[attr~=val]
Elector[attr~=val]：选择具有attr属性且属性值包含val的Elector元素<input type='text' class='input warning' /> <style> input[class~='warning'] { background: red; } </style> -
Elector[attr^=val]
Elector[attr^=val]：选择具有attr属性且属性值以val开头的Elector元素<input type='text' class='warning' /> <style> input[class^='warn'] { background: red; } </style> -
Elector[attr$=val]
Elector[attr$=val]：选择具有attr属性且属性值以val结尾的Elector元素<input type='text' class='warning' /> <style> input[class$='ing'] { background: red; } </style>
（二）、关系选择器
关系选择器可以根据元素与元素之间所处关系来选择元素
-
后代选择器
后代选择器可以选择作为某元素后代的元素<h1> <strong> strong标签 </strong> </h1> <style> h1 strong { color: red; } </style> -
子元素选择器
子元素选择器只能选择作为某元素子元素的元素<h1> <strong> 显示红色字 </strong><strong> 不显示红色字 </strong> </h1> <style> h1 > strong { color: red; } </style> -
相邻兄弟选择器
相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素<ul> <li>不显示红字1</li> <li>显示红字2</li> <li>显示红字3</li> </ul> <style> li + li { color: red; } </style>
六、CSS 伪元素
伪元素：用于向某些选择器设置特殊效果
-
:first-letter
:first-letter：向文本的第一个字母添加特殊样式<p> hello first-letter </p> <style> p:first-letter { color:red; font-size:30px; } </style> -
:first-line
:first-line：向文本的首行添加特殊样式<p> hello first-line </p> <style> p:first-line { color:red; font-size:30px; } -
:before
:before：在元素之前添加内容<p> hello before </p> <style> p:before { content: 'before content' } -
:after
:after：在元素之后添加内容<p> hello after </p> <style> p:after { content: 'after content' }
七、课后作业
- 熟悉下CSS的基本使用，并练习CSS三种引用方式
- 练习下css字体和背景，尝试做属于自己的网站
- 尝试使用伪类、伪元素对自己的网站进行美化
- 熟悉掌握属性选择器，重点关注关系选择器
3380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
