一.CSS:为了优化页面
1.语法结构:选择器,属性,值(selector {property: value})
选择器 (selector) 通常是你希望定义的 HTML 元素或标签,属性 (property) 是你 希望改变的属性,并且每个属性都有一个值。属性和值被冒号分开,并由花括号包围 这样就组成了一个完整的样式声明(declaration):body {color: blue}
2.css的三种使用方式:
2.1 行内样式:行内样式:使用标签内部的style属性给每一个标签设置样式
缺点:一次只能给一个标签设置样式,如富哦标签比较多,工作量比较大,而且更 改起来比较麻烦
2.2 内部样式:使用style标签,给style标签中写css的样式代码
缺点:css代码和html代码混杂在了一起,管理起来比较麻烦
2.3 外部样式(推荐使用):在html代码的外部,创建一个css文件,css文件中写独立 的css代码,使用的时候,直接将css文件导入到html文件中即可
<link href="1.css" rel="stylesheet" />
href : 表示外部css文件的位置
rel: 表示关联的是样式表
3.css中的选择器
3.1 标签选择器:语法:标签名称{css代码}
div{font-size:14px;color:#F00;} <div id="d1">div1</div><br />
3.2 类选择器:语法:.类名{css代码}
.c1{font-size:16px;color:#00F;} <div class="c1">div2</div><br />
3.3 id选择器:语法:#id值{css样式}
#d1{font-size:24px;color:#600;} <div id="d1">div1</div><br />
3.4 并集选择器:当多个选择器中的css代码相同的时候,我们可以使用并集选择器,对这些css代码进行抽取
.c1,.c2{font-size:16px;color:#00F;}
3.5 交集选择器:选中某一个标签中的子标签
div span{font-size:36px;color:#006;}
<div><span>div中的span标签</span></div><br />
注意:当一个标签同时被标签选择器和类选择器选择时,类选择器优先!!!
4.伪类选择器:可以控制标签在不同的状态下展示出的不同的样式
link:没有访问过的状态
hover:鼠标划过的状态
active:鼠标按下没有松开的状态
visited:已经访问过的状态
设置伪类选择器的时候,设置不同状态是有一定的顺序的(link-visited-hover-active)
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的
5.css文本属性和值
设置字符间距
letter-spacing:4px;
设置文本的位置
text-align:center;
给文本设置上划/下划/中划线
text-decoration:underline;
设置词语和词语之间的间距,设置之前需要分词,每个词语之间使用空格隔开
word-spacing:20px;
6.css字体
设置字体
font-family:"黑体";
设置字体大小
font-size:36px;
设置字体样式*/
font-style:italic;
设置字体的粗细
font-weight:bold;
字体设置的简写属性,一定要注意属性的顺序
font:italic bold 36px "黑体";
7.css背景
给标签设置背景颜色
background-color:#006;
将背景设置为图片
background-image:url(05.%E7%B4%A0%E6%9D%90/mm.jpg);
设置背景图片的重复规则
repeat:默认显示的重复方式,x,y方向都重复
repeat-x:设置图片仅在x方向上重复
repeat-y:设置图片仅在y轴方向上进行重复
no-repeat:图片不重复
background-repeat:no-repeat;
设置图片的位置
background-position:top right ;
设置图片背景的简写样式
background:#006 url(05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top right;
8.css列表
设置列表选项前面的样式
list-style-type:circle;
将图片设置为列表选项的一个标记
list-style-image:url(05.%E7%B4%A0%E6%9D%90/start.jpg);8?
列表样式的简写属性
list-style:url(05.%E7%B4%A0%E6%9D%90/start.jpg);
9.css表格
合并表格的边框,所有的边框都消失
border-collapse:collapse;
10.css边框
width:300px;
height:200px;
/*
必须首先设置边框的样式之后,边框的颜色才可以显示
border-color:#F00;
给四个边框非别设置不同的颜色
border-top-color:#0F0;
border-bottom-color:#063;
border-left-color:#9C0;
border-right-color:#F00;
设置边框的样式
border-style:solid;
实线:solid*/
border-left-style:solid;
点划线:dotted
border-top-style:dotted;
双实线:double
border-right-style:double;
虚线:dashed
border-bottom-style:dashed;
设置边框的宽度
border-width:5px;
border-left-width:1px;
border-top-width:3px;
border-right-width:6px;
border-bottom-width:9px;
*/
使用简写属性,设置边框样式:booder:border-width border-style border-color
这个简写属性必须牢记
border:2px solid #F00;
11.盒子模型
width:盒子的宽度
height:盒子的高度
border-width:盒子的厚度
padding:设置盒子的内边距(盒子的内容距离盒子内边框的距离)
margin:设置盒子的外边距(盒子外边框和另一个盒子的外边框距离)
1.语法结构:选择器,属性,值(selector {property: value})
选择器 (selector) 通常是你希望定义的 HTML 元素或标签,属性 (property) 是你 希望改变的属性,并且每个属性都有一个值。属性和值被冒号分开,并由花括号包围 这样就组成了一个完整的样式声明(declaration):body {color: blue}
2.css的三种使用方式:
2.1 行内样式:行内样式:使用标签内部的style属性给每一个标签设置样式
缺点:一次只能给一个标签设置样式,如富哦标签比较多,工作量比较大,而且更 改起来比较麻烦
2.2 内部样式:使用style标签,给style标签中写css的样式代码
缺点:css代码和html代码混杂在了一起,管理起来比较麻烦
2.3 外部样式(推荐使用):在html代码的外部,创建一个css文件,css文件中写独立 的css代码,使用的时候,直接将css文件导入到html文件中即可
<link href="1.css" rel="stylesheet" />
href : 表示外部css文件的位置
rel: 表示关联的是样式表
3.css中的选择器
3.1 标签选择器:语法:标签名称{css代码}
div{font-size:14px;color:#F00;} <div id="d1">div1</div><br />
3.2 类选择器:语法:.类名{css代码}
.c1{font-size:16px;color:#00F;} <div class="c1">div2</div><br />
3.3 id选择器:语法:#id值{css样式}
#d1{font-size:24px;color:#600;} <div id="d1">div1</div><br />
3.4 并集选择器:当多个选择器中的css代码相同的时候,我们可以使用并集选择器,对这些css代码进行抽取
.c1,.c2{font-size:16px;color:#00F;}
3.5 交集选择器:选中某一个标签中的子标签
div span{font-size:36px;color:#006;}
<div><span>div中的span标签</span></div><br />
注意:当一个标签同时被标签选择器和类选择器选择时,类选择器优先!!!
4.伪类选择器:可以控制标签在不同的状态下展示出的不同的样式
link:没有访问过的状态
hover:鼠标划过的状态
active:鼠标按下没有松开的状态
visited:已经访问过的状态
设置伪类选择器的时候,设置不同状态是有一定的顺序的(link-visited-hover-active)
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的
5.css文本属性和值
设置字符间距
letter-spacing:4px;
设置文本的位置
text-align:center;
给文本设置上划/下划/中划线
text-decoration:underline;
设置词语和词语之间的间距,设置之前需要分词,每个词语之间使用空格隔开
word-spacing:20px;
6.css字体
设置字体
font-family:"黑体";
设置字体大小
font-size:36px;
设置字体样式*/
font-style:italic;
设置字体的粗细
font-weight:bold;
字体设置的简写属性,一定要注意属性的顺序
font:italic bold 36px "黑体";
7.css背景
给标签设置背景颜色
background-color:#006;
将背景设置为图片
background-image:url(05.%E7%B4%A0%E6%9D%90/mm.jpg);
设置背景图片的重复规则
repeat:默认显示的重复方式,x,y方向都重复
repeat-x:设置图片仅在x方向上重复
repeat-y:设置图片仅在y轴方向上进行重复
no-repeat:图片不重复
background-repeat:no-repeat;
设置图片的位置
background-position:top right ;
设置图片背景的简写样式
background:#006 url(05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top right;
8.css列表
设置列表选项前面的样式
list-style-type:circle;
将图片设置为列表选项的一个标记
list-style-image:url(05.%E7%B4%A0%E6%9D%90/start.jpg);8?
列表样式的简写属性
list-style:url(05.%E7%B4%A0%E6%9D%90/start.jpg);
9.css表格
合并表格的边框,所有的边框都消失
border-collapse:collapse;
10.css边框
width:300px;
height:200px;
/*
必须首先设置边框的样式之后,边框的颜色才可以显示
border-color:#F00;
给四个边框非别设置不同的颜色
border-top-color:#0F0;
border-bottom-color:#063;
border-left-color:#9C0;
border-right-color:#F00;
设置边框的样式
border-style:solid;
实线:solid*/
border-left-style:solid;
点划线:dotted
border-top-style:dotted;
双实线:double
border-right-style:double;
虚线:dashed
border-bottom-style:dashed;
设置边框的宽度
border-width:5px;
border-left-width:1px;
border-top-width:3px;
border-right-width:6px;
border-bottom-width:9px;
*/
使用简写属性,设置边框样式:booder:border-width border-style border-color
这个简写属性必须牢记
border:2px solid #F00;
11.盒子模型
width:盒子的宽度
height:盒子的高度
border-width:盒子的厚度
padding:设置盒子的内边距(盒子的内容距离盒子内边框的距离)
margin:设置盒子的外边距(盒子外边框和另一个盒子的外边框距离)