认识CSS样式:
CSS:层叠样式表(Cascading Style Sheets),主要用于定义HTML内容在浏览器内的显示样式
语法:
选择符{ 属性: 值}
举例:
p{ color: blue}
选择符:又称选择器,指明要应用样式规则的元素,如<html>、<body>、<h1>、<p>、<img>...
声明:指的是冒号”:“
多条声明:使用分号”;“隔开,最好每行都加上分号
注释:CSS使用 /**/,HTML注释则使用<!--内容-->
1. CSS样式分类:
1. 内联式
<p style="color:red;font-size:12px">这里文字是红色。</p>
2. 嵌入式
较通用的一类,CSS样式放置在<style>标签中,而<style>通常要放置在<head>内
<style type="text/css">
span{
color:blue;
font-size:12px;
}
</style>
3. 外部式
把CSS代码写到一个单独的外部文件中,以.css扩展名结尾,在<head>内使用<link>标签引入,如:
<link href="base.css" rel="stylesheet" type="text/css" />
href: .css文件路径
rel和type: rel="stylesheet" type="text/css" 是固定写法,不能改
三种方法的优先级:
内联式 > 嵌入式 > 外部式
就近原则,嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面
以上规则适用于相同权值的情况
2. CSS 类选择器
语法:
.类选器名称{css样式代码;}
举例:
<style type="text/css">
.stress{
color:red;
}
</style>
注意:前边的小圆点是必须要有的
使用:
<span class="stress">胆小如鼠</span>
3. CSS ID选择器
语法:
#ID选择器名称{css样式代码}
举例:
#setGreen{color:green;}
<span id="setGreen">胆小如鼠</span>
区别:
起始于 '.' 与 '#'
调用时 class= 与 id=
ID选择器只能在文档中使用一次,类选择器则可以使用多次
一个元素可以使用多个类选择器同时设置多个样式,而ID选择器是不可以的,如 <span class="stress bigsize">三年级</span>
4.CSS 子选择器
还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。举例:
.food>li{border:1px solid red;}
若大于符号换成空格( ),用于选择指定标签元素的所有后辈元素,举例:
.first span{border:1px solid red;}
5. CSS 通用选择器
通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素:
* {color: red;}
此时,所有元素的字体都为红色
6. CSS 伪类选择符
伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
a:hover{color:red;}
此时,把鼠标放置到元素上边,颜色就会切换为红色
7. CSS 分组选择符
多个标签使用逗号隔开:
h1,span{color:red;}
相当于:
h1{color:red;}
span{color:red;}
8. CSS 继承
CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代
如:
p{color:red;} /*可被span继承*/
p{border:1px solid red;} /*此时,span将不继承,边框显示红色*/
9. CSS 特殊性(权值)
权值:
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。
层叠:
相同权值时,最后一个将被应用
重要性:
相同权值时,使用 !important 将得到最高权重,如 p{color:red!important;}
样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,使用 !important 优先级比 用户自己设定 还高
10. CSS 文字排版
1. 字体
body{font-family:"宋体";}
body{font-family:"Microsoft Yahei";}
2. 字号,颜色
body{font-size:12px;color:#666}
3. 粗体
p span{font-weight:bold;}
a{font-weight:bold;}
4. 斜体
p a{font-style:italic;}
p{font-style:italic;}
5. 下划线
p a{text-decoration:underline;}
6. 删除线
.oldPrice{text-decoration:line-through;}
7. 缩进
p{text-indent:2em;} /*2em 表示两倍文字大小*/
8. 行间距
p{line-height:1.5em;}
9. 字间距、字母间距
h1{letter-spacing:50px;word-spacing:50px;} /*分别是字母、单词间距*/
19.对齐
h1{text-align:center;} /*left、right和center*/
11. CSS 元素分类
块状元素:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
内联元素:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
内联块状元素:
<img>、<input>
1. 块状元素:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
注意:a{display:block;} /*可以把内联元素 a 转换为 块状元素*/
2. 内联元素:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
注意:display:inline 可以转换成内联元素
3. 内联块状元素:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。
注意:display:inline-block 可以转换成内联块状
12. CSS 盒模型
1. 边框
div{ border:2px solid red;}
相当于:
div{
border-width:2px;
border-style:solid;
border-color:red;
}
border-style: dashed(虚线)| dotted(点线)| solid(实线)
border-color:#888; //前面的井号不要忘掉。
border-width: 有 thin | medium | thick(但不是很常用),最常还是用象素(px)
2. 上下左右边框:
div{border-bottom:1px solid red;} /*top、bottom、left和right*/
3. 高度和宽度
div{
width:200px; /*宽度*/
height:30px; /*高度*/
padding:20px; /*元素到边框的距离,又名为“填充”*/
border:1px solid red;
margin:10px; /*两盒子距离,又名为“边界”*/
}
CSS:层叠样式表(Cascading Style Sheets),主要用于定义HTML内容在浏览器内的显示样式
语法:
选择符{ 属性: 值}
举例:
p{ color: blue}
选择符:又称选择器,指明要应用样式规则的元素,如<html>、<body>、<h1>、<p>、<img>...
声明:指的是冒号”:“
多条声明:使用分号”;“隔开,最好每行都加上分号
注释:CSS使用 /**/,HTML注释则使用<!--内容-->
1. CSS样式分类:
1. 内联式
<p style="color:red;font-size:12px">这里文字是红色。</p>
2. 嵌入式
较通用的一类,CSS样式放置在<style>标签中,而<style>通常要放置在<head>内
<style type="text/css">
span{
color:blue;
font-size:12px;
}
</style>
3. 外部式
把CSS代码写到一个单独的外部文件中,以.css扩展名结尾,在<head>内使用<link>标签引入,如:
<link href="base.css" rel="stylesheet" type="text/css" />
href: .css文件路径
rel和type: rel="stylesheet" type="text/css" 是固定写法,不能改
三种方法的优先级:
内联式 > 嵌入式 > 外部式
就近原则,嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面
以上规则适用于相同权值的情况
2. CSS 类选择器
语法:
.类选器名称{css样式代码;}
举例:
<style type="text/css">
.stress{
color:red;
}
</style>
注意:前边的小圆点是必须要有的
使用:
<span class="stress">胆小如鼠</span>
3. CSS ID选择器
语法:
#ID选择器名称{css样式代码}
举例:
#setGreen{color:green;}
<span id="setGreen">胆小如鼠</span>
区别:
起始于 '.' 与 '#'
调用时 class= 与 id=
ID选择器只能在文档中使用一次,类选择器则可以使用多次
一个元素可以使用多个类选择器同时设置多个样式,而ID选择器是不可以的,如 <span class="stress bigsize">三年级</span>
4.CSS 子选择器
还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。举例:
.food>li{border:1px solid red;}
若大于符号换成空格( ),用于选择指定标签元素的所有后辈元素,举例:
.first span{border:1px solid red;}
5. CSS 通用选择器
通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素:
* {color: red;}
此时,所有元素的字体都为红色
6. CSS 伪类选择符
伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
a:hover{color:red;}
此时,把鼠标放置到元素上边,颜色就会切换为红色
7. CSS 分组选择符
多个标签使用逗号隔开:
h1,span{color:red;}
相当于:
h1{color:red;}
span{color:red;}
8. CSS 继承
CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代
如:
p{color:red;} /*可被span继承*/
p{border:1px solid red;} /*此时,span将不继承,边框显示红色*/
9. CSS 特殊性(权值)
权值:
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。
层叠:
相同权值时,最后一个将被应用
重要性:
相同权值时,使用 !important 将得到最高权重,如 p{color:red!important;}
样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,使用 !important 优先级比 用户自己设定 还高
10. CSS 文字排版
1. 字体
body{font-family:"宋体";}
body{font-family:"Microsoft Yahei";}
2. 字号,颜色
body{font-size:12px;color:#666}
3. 粗体
p span{font-weight:bold;}
a{font-weight:bold;}
4. 斜体
p a{font-style:italic;}
p{font-style:italic;}
5. 下划线
p a{text-decoration:underline;}
6. 删除线
.oldPrice{text-decoration:line-through;}
7. 缩进
p{text-indent:2em;} /*2em 表示两倍文字大小*/
8. 行间距
p{line-height:1.5em;}
9. 字间距、字母间距
h1{letter-spacing:50px;word-spacing:50px;} /*分别是字母、单词间距*/
19.对齐
h1{text-align:center;} /*left、right和center*/
11. CSS 元素分类
块状元素:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
内联元素:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
内联块状元素:
<img>、<input>
1. 块状元素:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
注意:a{display:block;} /*可以把内联元素 a 转换为 块状元素*/
2. 内联元素:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
注意:display:inline 可以转换成内联元素
3. 内联块状元素:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。
注意:display:inline-block 可以转换成内联块状
12. CSS 盒模型
1. 边框
div{ border:2px solid red;}
相当于:
div{
border-width:2px;
border-style:solid;
border-color:red;
}
border-style: dashed(虚线)| dotted(点线)| solid(实线)
border-color:#888; //前面的井号不要忘掉。
border-width: 有 thin | medium | thick(但不是很常用),最常还是用象素(px)
2. 上下左右边框:
div{border-bottom:1px solid red;} /*top、bottom、left和right*/
3. 高度和宽度
div{
width:200px; /*宽度*/
height:30px; /*高度*/
padding:20px; /*元素到边框的距离,又名为“填充”*/
border:1px solid red;
margin:10px; /*两盒子距离,又名为“边界”*/
}