Web前端学习(2)_css
1.CSS入门
1.1 引入
html:负责网页的结构
css: 负责网页的样式
1.2 定义
CSS(Cascading Style Sheet 层叠样式表) 简称,样式。主要负责网页的美观
1.3 css的三种使用方式
1.3.1行内样式
注意:
1)使用标签的style属性进行css控制,css写在style属性值中
弊端:只能控制一个标签的样式,如果对于多个标签的样式进行设计,过于麻烦
<a href="" style="color:#0F3">超链接</a><br /> <a href="" style="color:#0F3">超链接</a><br /> <a href="" style="color:#0F3">超链接</a><br />
1.3.2内部样式
注意:
1)使用style的标签进行css控制,css内容写在style标签体内
2)一次控制多个标签的样式
3)和html标签混杂在一起,不好维护。css内容无法在多个html页面中重用
分析:把style标签写在haed标签里面,使用如上语法选中对应标签,进行样式设置<style type="text/css"> a{ color:#F30; font-size:36px; } </style>
1.3.3外部样式(推荐使用)
注意:
1)建立独立后缀为css的文件,css内容写在该文件中
2)在使用css的html页面中,导入外部css文件
使用方法:
<!-- 导入外部css文件 href : 表示外部css文件的位置 rel: 表示关联的是样式表 -->
<link href="01.css" rel="stylesheet"/>
分析:在一个css文件里面写好样式代码,使用上面的句子进行导入<link href="css示例.css" rel="stylesheet" />
2 CSS语法
2.1 选择器(selector):使用选择器来选择需要添加样式的标签。
2.1.1 标签选择器
作用:选择同名的标签
注意:这种方法会选择到该文件里面的所有同名的标签
分析:如下,会选中所有的div标签
<style type="text/css"> div{ color:#963; } </style>
2.1.2 类选择器
作用: 选择同类的标签
注意:
1)选择的标签必须有class的属性。同类的标签使用同名
2)当一个标签同时被标签选择器和类选择器选择,那么类选择器优先
分析:.加类名,会选中标签中类的属性为该名字的所有标签
.class1{ color:#36F; }
2.1.3 id选择器
作用: 选择一个标签
分析:同上述类选择器,但是使用 # 开头的
#id1{ color:#00C; }
注意:
1)选择的标签必须有id属性。
2)在同一个html页面中,建议不要出现两个同名的id属性的标签,后面使用javascript代码选择标签的时候,getElementById("id属性值")
3)id选择器的优先级最高!
2.1.4 并集选择器
作用: 当多个选择器的css内容相同,那么可以使用并集选择器来合并css内容
/*当两个类css代码相同的时可以使用并集选择器将两个选择其中的代码进行抽取,形 成一个并集选择器*/ .c1,.c2{ color:#00F; }
2.1.5 交集选择器
作用: 选择某个选择器中的子标签
分析:选中div标签中的span标签
div span{ color:#006; }
2.1.6 通用选择器
作用; 选择所有的标签
2.1.7伪类选择器
作用:控制标签在不同状态下的样式。
标签有四种状态:
(1)link: 没有访问过的状态
(2)hover: 鼠标经过的状态
(3)active:鼠标激活(按下但没有松开)的状态
(4)visited: 已经被访问过的状态(鼠标点下且松开)
注意:
1)在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
2)在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
正确顺序: link visited hover active
<style type="text/css"> a:link{ color:#3F0; } a:visited{ color:#3FF; } a:hover{ color:#9C0; } a:active{ color:#00F; } </style>
2.2 常用的CSS属性和值
2.2.1 文本属性
/*设置字符间距*/ letter-spacing:4px; /*设置文本的位置*/ text-align:center; /*给文本设置上划/下划/中划线*/ text-decoration:underline; /*设置词语和词语之间的间距,设置之前需要分词,每个词语之间使用空格隔开*/ word-spacing:10px;
2.2.2 设置字体
/*设置字体*/ /*font-family:"黑体";*/ /*设置字体大小*/ /*font-size:36px;*/ /*设置字体样式*/ /*font-style:italic;*/ /*设置字体的粗细*/ /*font-weight:bold;*/ /*字体设置的简写属性,一定要注意属性的顺序*/ font:italic bold 36px "黑体";
2.2.3 设置背景
/*给标签设置背景颜色*/ /*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;
2.2.4 设置列表
ul{ /*设置列表选项前面的样式*/ /*list-style-type:circle;*/ /*将图片设置为列表选项的一个标记*/ /*list-style-image:url(05.%E7%B4%A0%E6%9D%90/start.jpg);*/ /*列表样式的简写属性*/ list-style:url(05.%E7%B4%A0%E6%9D%90/start.jpg); }
2.2.5 设置表格
table{ /*合并表格的边框*/ border-collapse:collapse;}
2.2.6设置边框
div{ 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; }
3 盒子模型
3.1 定义
可以把html页面上每个标签看做是一个盒子。
3.2 盒子相关的属性:
宽度和高度(width和height): 决定这个盒子的容量
内边距(padding): 盒子边框与内容的距离
边框(border): 盒子的厚度
外边距(margin): 盒子与盒子之间的距离
div{ width:100px; height:100px; border:6px solid #900;} #d1{ width:200px; height:200px; padding-top:10px; padding-left:10px; margin-bottom:10px;}
4 CSS定位
(1)相对定位:relative(相对自己之前的位置)
(2)绝对定位:abosolute(相对父标签的位置)
(3)固定定位:fixed(相对浏览器位置固定,不随着滚动条的拖动而位置改变)
/*相对定位,相对于自己之前的位置*/ /* position:relative; top:20px; left:20px;*/ /*绝对定位:相对于自己的父标签而言的*/ /* position:absolute; top:20px; left:20px;*/ /*固定定位:相对于浏览器而言*/ position:fixed; left:500px; top:300px;