时间：2016年5月16号
前三天，HTML5的基础已经完结。网页中涉及的样式就跟我们今天学习的css有关。首先，在HTML的基础上再来学习css的样式，总是觉得要轻松很多，但是总是存在记忆的问题，且不说css的样式多而杂，就连属性也有一大堆，这样的大规模强制性接受和记忆并非可能。但是，总归一点，多练多些，孰能生巧。
首先，今天的内容分几大块。我们先来看看css的基本概述；
一、CSS概述：
.CSS 的作⽤
• 什么是 CSS
• CSS 与 HTML 之间的关系
• HTML 属性与 CSS 样式的使⽤用原则
使用css样式表
• 使⽤用 CSS 样式表的⽅方式
• 内联⽅方式使⽤用 CSS
• 内部样式表
• 外部样式表
二、具体讲解css
a、 CSS 的作⽤
i 查看如下代码
<body bgcolor="silver" text="blue">
<h2>h2 text</h2>
<hr color="red" />
Some text here. </body>
注意： 如果使⽤用 HTML 标记中的属性来定义样式，各元素对于样式的属性定义各不相同！
其显示的结果是h2 text和some text here字体颜色均为蓝色，body的背景颜色是银色，hr为分割线，其颜色为红色。
ii.查看如下代码
<html>
<head>
<style type="text/css"> body {
background-color:silver; color:blue; }
h2 {
background-color:orange; color:green;
}
hr { color:red; }
</style>
</head>
上述代码中要注意元素选择的css样式style是写在<heade></head>之间的。根据上述的css样式，body中的相应的标签会被设置样式。
b、什么是 CSS
• CSS（Cascading Style Sheets）：层叠样式表，⼜又叫级联样式表，简称样式表
• 用于 HTML ⽂文档中元素的样式定义 – 实现了将内容与表现分离 – 提⾼高代码的可重⽤用性和可维护性
CSS 与 HTML 之间的关系 • HTML ⽤用于构建⺴⽹网⻚页的结构 • CSS ⽤用于构建 HTML 元素的样式 • HTML 是⻚页⾯面的内容组成，CSS 是⻚页⾯面的表现
HTML 属性与 CSS 样式的使⽤用原则 • W3C 建议尽量使⽤用 CSS 样式取代 HTML 属性 – 实现内容和表现的分离 – 如果为 HTML 所特有的属性，则使⽤用 HTML 属性
345.png
c 、HTML 属性与 CSS 样式的使⽤用原则
• W3C 建议尽量使⽤用 CSS 样式取代 HTML 属性 – 实现内容和表现的分离 – 如果为 HTML 所特有的属性，则使⽤用 HTML 属性
三、引入css的三种方式：
1、标签内引用，style=“样式名：样式值；...”
2、内部引用
3、外部引用
其中标签内引用的优先级别最高。外部引用和内部引用的优先级别是一样的。
具体引用方式如下：
i 内联⽅方式使⽤用 CSS
• 样式定义在 HTML 元素的标准属性 style ⾥里
• CSS 语法
– 只需要将分号隔开的⼀一个或者多个属性/值对作为元素的 style 属性的值 – 属性和属性值之间⽤用：连接
– 多对属性之间⽤用；隔开
如下：
<h1 style =“background-color : silver ; color : blue ;”> ⽂文本 </h1>
•
ii 知 识 讲 解
内部样式表
• 样式表规则位于⽂文档头元素中的 <style> 元素内
– 在⽂文档的 <head> 元素内添加 <style> 元素
– 在 <style> 元素中添加样式规则
<html>
<head>
<style type="text/css">
h1 { color : blue ; }
</style> </head>
<body>
<h1>文本1</h1>
<h1>文本2</h1>
</body> </html>
•可以在当前⻚页⾯面范围内重⽤用
•知 识 讲 解
内部样式表（续1）
• 在 <style> 元素中添加样式规则 – 可以定义多个样式规则 – 每个样式规则有两个部分：选择器和样式声明
• 选择器：决定哪些元素使⽤用这些规则
• 样式声明：⼀一对⼤大括号，包含⼀一个或者多个属性/值对
外部样式引用和内部引用差不多，唯一的区别就是：内部引用是在style里面引用，而外部引用则是新建一个css的文档实行外部引用。
外部引用写法如下：
<html>
<head>
<link rel="stylesheet" type="text/css" href="myStyle.css" />
</head>
<body>
<h1>1号标题</h1>
<p>段落</p>
<span>其他⽂文本</span> </body>
</html>
四、css语法
i CSS 语法规范
. CSS 语法规范总结
• CSS 样式表特征
• 样式优先级
• !important 规则
ii css选择器
• 元素选择器
• 类选择题
• id 选择器
• 群组选择器
• 后代选择器
• 伪类选择器
• 通⽤用选择器
• ⼦子代选择器
• 选择器优先级
a、CSS 语法规范总结 • 内联样式：由样式声明组成
<h1 style=“background-color:silver;color:blue;”>文本</h1>
• 样式表（内部样式表或者外部样式表） – 由多个样式规则组成 – 每个样式规则有两个部分：选择器和样式声明
b、CSS 样式表特征
• 继承性 、
– ⼤大多数 CSS 的样式规则可以被继承
• 层叠性
– 可以定义多个样式 – 不冲突时，多个样式表中的样式可层叠为⼀一个
• 优先级
– 样式定义冲突时，按照不同样式规则的优先级来应⽤用样式
样式优先级
• 浏览器缺省设置
• 外部样式表或者内部样式表 – 就近优先
• 内联样式
注意：相同的样式，如果重复定义，以最后一次的定义为准
iii
!important 规则
• !important 可以调整样式规则的优先级
• 将 !important 添加在样式规则之后，中间⽤用空格隔开
– 选择器 {属性 : 属性值 !important; }
• 谨慎使⽤
在<html>文档中：
<p class="s1">段落⽂文本</p>
在样式表中：
<style type="text/css">
p.s1 { color:Red;}
p.s1 { color:Green;}
</style>
iiii CSS 基础选择器
a、通⽤用选择器
• 通⽤用选择器，显⽰示为⼀一个星号（*）
– 可以与任何元素匹配 – 常⽤用于设置一些默认样式，⽐比如设置整个⽂文档的⽂文本的默 认字体和⼤大⼩小
- {
font-size : 9pt; font-family : "Times New Roman";
}
b、元素选择器
• html ⽂文档的元素就是选择器
– 比如 <p>、<h1> 等
html { color : black ; }
h1 { color : blue ; }
h2 { color : silver ; }
c、类选择器
• 语法为：
.className { color:red;}
– 类名称不能以数字开头
• 所有能够附带class属性的元素都可以使⽤用此样式声明
– 将元素的 class属性的值设置为样式类名
• 样式表中：声明⼀一个样式类
.myClass
{
background-color : Pink; font-size : 35pt;
}
• html ⽂文档中：将元素的 class 属性的 值设置为样式类的名称
<h2 class="myClass">h2⽂文本</h2>
<p class="myClass">段落⽂文本</p>
类选择器（续1）
• 可以将多个类选择器应⽤用于同一个元素（多类选择器）
– HTML 元素的 class 属性的值中可能包含一个词列表 – 各个词之间⽤用空格分隔，每个词都是一个类选择器
• 样式表中：声明两个样式类
.important
{
font-weight : bold;
}
.warning
{
color : red;
}
• html ⽂文档中：将元素的 class 属性的 值设置为多个样式类名的列表 <p class="warning">警告</p> <p class="important">重要</p> <p class="important warning">哈哈</p>
其结果显示为“警告”和“哈哈”是红色而且宽度增加，而“重要”是黑色。
类选择器（续2）
• 可以将类选择器和元素选择器结合起来使⽤用，以实现对某 种元素中不同样式的细分控制（分类选择器）
• 语法为：元素选择器
.className { }
– 先声明一个元素选择器
– 然后使⽤用⼀一个点号（.）代表将使⽤用类选择器
– 然后声明一个类的名称
– 最后使⽤用⼀对⼤大括号声明样式规则
• 将样式规则与附带 class 属性的某种元素匹配
– 元素的 class 属性的值为分类选择器中指定的样式类名
例子：
• 样式表中：定义⼀一个分类选择器
p.important
{
color : red ;
font-size : 20pt;
border:1px solid black;
}
• html ⽂文档中：将元素的 class 属性的值设置为样式类的名称
<h2 class="important">h2⽂文本</h2>
<p class="important">段落⽂文本</p>
结果会发现只有<p>元素使用了样式，如果要h2也使用样式，那么可以这样在样式表中这样写：
h2，p.important
{
color : red ;
font-size : 20pt;
border:1px solid black;
}
既可以实现h2 也使用了样式。
d、id 选择器
• id 选择器以一种独⽴立于⽂文档元素的⽅方式来指定样式
• 它仅作⽤用于 id 属性的值
• 语法为：
– 选择器前⾯面需要有一个 # 号
– 选择器本⾝身则为⽂文档中某个元素的 id 属性的值
例子如下：
• 样式表中：定义⼀一个 id 选择器
mostImportant
{
color:red;
background:yellow;
}
• html ⽂文档中：将元素的 id 属性的值设置为选择器的名称
<h1 id="mostImportant">This is important!</h1>
<h1 >This is important!</h1>
结果显示为：第一个This is important!背景变成了黄色。这就是后面所说的群组选择器
e、群组选择器
• 选择器声明为以逗号隔开的选择器列表
– 将⼀一些相同的规则作⽤用于多个元素
样式表中：定义选择器分组
h2, p.important { color:green; font-size:20pt; border:1px solid red;
•html ⽂文档中：
<p class="important">p text</p>
<h2>h2 text</h2>
f、后代选择器
• 依据元素在其位置的上下⽂文关系来定义样式
• ⼜又称为包含选择器，⽤用于选择作为某元素后代的元素
– 选择器一端包括两个或多个⽤用空格分隔的选择器
• 样式表中：
定义派⽣生选择器
h1 span { color:red; }
• html ⽂文档中：
<h1> An<span>important</span> question. </h1> <span>other</span>
最后会发现 只有 <h1> 元素中的 <span> 元 素中的⽂文本使⽤用该样式
g、伪类选择器
• 伪类⽤用于向某些选择器添加特殊的效果
• 使⽤用冒号(:)作为结合符，结合符左边是其他选择器，右边 是伪类 – 选择器 : 伪类选择器
• CSS 伪类选择器可以分为
– 链接伪类
– 动态伪类
– 目标伪类
– 元素状态伪类
– 结构伪类
– 否定伪类
伪类选择器（续1）
• 链接伪类
– : link ，适⽤用于尚未访问的链接 – : visited ，适⽤用于访问过的链接
• 动态伪类，⽤用于呈现⽤用户操作 – :hover，适⽤用于⿏鼠标悬停在 HTML 元素时
– :active，适⽤用于 HTML 元素被激活时
– :focus，适⽤用于 HTML 元素获取焦点时
注意：顺序一定不能改 伪类选择器优先级比类选择器高
例子：
a:link
{
color: black;
font-size:15pt;
}
a:visited
{
color: pink;
font-size:15pt;
}
a:hover
{
font-size : 20pt;
}
a:active
{
color : red;
}
h、优先级别
youxianji.png
五、尺寸与边框
i css单位
——尺寸单位
——颜色单位
ii 尺寸属性
——尺寸
——溢出
——哪些HTML元素可以设置尺寸属性
iii 边框属性
——边框
——边框倒角
——边框阴影
——图片边框
——轮廓
A、css单位
%，in英寸，cm，mm，pt，px，em
B、颜色单位
.rgb取值范围0~255（red，green，blue）
.rbga a代表透明度，取值0~1.
.rgb有两种表示方式（255，0，0）（50%，50%，50%）
• #rrggbb：⼗十六进制数，如#ff0000 • #rgb：简写的⼗十六进制数，如#f00 • 表⽰示颜⾊色的英⽂文单词，如 red
C、尺⼨
• 尺⼨寸属性是⽤用于设置元素的宽度和⾼高度
– 单位一般为像素或百分⽐比
• 宽度属性
– width
– max-width
– min-width
• ⾼高度属性
– height
– max-height
– min-height
D、溢出
• 使⽤用尺⼨寸属性控制框的⼤大⼩小时，如果内容所需的空间⼤大于 框本⾝身的空间，会导致内容溢出
• overflow：当内容溢出元素框时如何处理
– visible （默认的）
– hidden（隐藏的）
– scroll （溢出滚动条）
– auto （超出滚动条）
• overflow-x
• overflow-y
E、哪些 HTML 元素可以设置尺⼨寸属性
• 块级对象，
如
– p,
– div
– h1,h2,h3,h4,h5,h6
– ul,ol,li,dl,dt,dd等
• 存在width、height属性的 HTML 元素 – img
– table 等
F、边框
• 简写⽅方式 – border:width style color;
• 单边定义 – border-left/right/top/bottom:width style color;
• border-width – border_left/right/top/bottom-width
• border-style – border-left/right/top/bottom-style
• border-color – border-left/right/top/bottom-color
注意：•边框颜⾊色，可设置为值 transparent（⽤用于创建有宽度的不可⻅见边框）
G、边框倒⾓角
• border-radius 属性
– 为简写属性，按顺时针顺序设置四个倒⾓角
– 取值为绝对值或者百分⽐比
• 单独定义
– border-top-left-radius：边框左上⾓角
– border-top-right-radius：边框右上⾓角
– border-bottom-left-radius：边框左下⾓角
– border-bottom-right-radius：边框右下⾓角
H、边框阴影
• box-shadow：向⽅方框添加⼀一个或多个阴影
– 取值为多个属性值的列表
• box-shadow: h-shadow v-shadow blur spread color inset;
• 其中
– h-shadow：必需，为水平阴影的位置
– v-shadow：必需，为垂直阴影的位置
– blur：可选，为模糊距离
– spread：可选，为阴影的尺⼨寸
– color：可选，为阴影的颜⾊色
– inset：可选，将外部阴影 (outset) 改为内部阴影
图片边框
• border-image 属性：将图片规定为包围 div 元素的边框
– border-image: source width repeat;
• 也可以分别设置
– border-image-source：图⽚片的路径
– border-image-width：图⽚片边框的宽度
– border-image-repeat：图像边框是否应平铺(repeat)、铺满 (round)或拉伸(stretch)
轮廓
• 轮廓（outline）是绘制于元素周围的⼀一条线，位于边框边 缘的外围，可起到突出元素的作⽤用
• 简写⽅方式 – outline:color style width;
• outline-width：轮廓的宽度 • oultine-style：轮廓的样式
• outline-color：轮廓的颜⾊色
本次课程到此结束，相关参考：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css基础</title>
<style>
/子代选择器,直系子代，和后代选择器优先级别一致/
div>span{
color:blue;
}
/后代选择器，获取dic里面的所有span/
div span{
color:red;
}
/伪类选择器,最常用的是hover/
/link默认状态下/
.a{
background-color:black;
}
a:link{
background-color: red;
}
#a{
background-color: pink;
}
/a的链接被访问之后/
a:visited{
background-color: blue;
}
/鼠标悬浮的时候/
a:hover{
background-color: yellow;
}
/鼠标按压时/
a:active{
background-color: green;
}
a:focus{
background-color: gray;
}
input{
outline: 0;
}
/*伪类选择器可以使用其他选择器先获取对应标签*/
.txt{
color: gray;
font-size: 9pt;
}
.txt:focus{
color: black;
font-size: 11pt;
}
/*基本选择器的优先级，内联样式>id>伪类>类>标签名*/
a{
color: blue;
}
#footer{
width: 100px;
height: 100px;
/*a代表透明度,取值为0~1.
*/
background-color: #30f;
}
#art {
border-image: url("nihao/22.jpg") 50repeat;
/*border: solid 1px gray;
/*大于半径默认去半径*/
/*box-shadow: 10px 3px 5px 10px blue inset;
border-radius:50px 40px 30px 20px;
width:100px;
height:100px;
overflow:auto;*/
/* overflow处理溢出scrool内容溢出显示滚动条,，visible看得见的,默认的 hidden隐藏 ,auto内容超出才会显示滚动条/
}
/可以设置宽度的标签为快标签，img，table，行标签设置宽高需要装话为块标签，结构化标签都是块标签/
/边框样式重用solid，dotted，实现和虚线, transparent可以设置边框颜色，只是不显示边框*/
</style>
</head>
<body>
<div id="head">
<span>我是div里面的第一层span</span>
<p>我是<span>div里面的第二层span</p>
<a id="a" class="a" href="http://www.taobao.com">taobao</a>
</div>
<input class="txt" type="text" value="用户名"/>
<input class="txt" type="text" value="地址">
<input class="txt" type="button" value="cuixu"/>
<div id="footer"></div>
<p id="art">
匆匆那年我们究竟说了几遍再见之后在拖延，谁有没有爱过不是一场七情上面的雄辩。目视前方下巴抬高更漂亮，不就是女的vdjvndg 就看你发过苦难代名词 多加看不见很快乐地方看过看不了的可喜欢你的疯狂呐喊教科书的房价过快的上空飞过可视电话可是对方能体会就哦哦湿热建设规划开始给惊恐山谷接电话刚开始</p>
</body>
</html>
网友评论