1CSS入门
1.1引入
HTML:负责网页的结构
css:负责网页的美观(样式)
1.2定义
CSS(Cascading Style Sheet 层叠样式表) 简称 样式
主要: 负责网页的样式
注释有 /* 注释内容
*/
1.3CSS的使用方式
1)行内的样式
注意
1)使用标签的style属性进行CSS控制,CSS卸载style属性值中
2)弊端:只能控制一个标签的样式
<a href="" style=" font-size:80px; color:#000;"></a>
2) 内部的样式
注意:
1)使用style的标签进行CSS控制,CSS的内容写在style标签中
2)一个可以控制多个标签样式
3)弊端:和HTML标签混杂在一起。不好维护,css样式内容无法在多个HTML页面中使用
<style type=‘text/css">
a{
font-size:24px;
color:#000;
}
</style>
3)外部样式(推荐使用)
注意:
1)建立独立后缀名为css的文件,css内容写在该文件中
2)在使用css的HTML页面中,导入外部的css文件
href :表示外部文件的位置
rel: 表示关联的是样式表
<link href="01.css" rel="stylesheet"/>
2css语法
选择器(selector):使用选择器选择需要添加样式的标签
css属性(property):给选择的标签添加什么样式,例如;字体大小,颜色,背景...
css值(value):添加样式的具体的值、12px,红色,背景图片
2.1选择器
标签选择器
作用:选择同名的标签
注意:
1)选择到所有的同名标签
div{
}
类选择器
作用:选择同一类的标签
.cc{
}
<p class="cc"></p>
注意:
1)选择的标签必须有class的属性,同类的标签使用同名。
2)当一个标签同时被标签选择器和类选择器同时选中,则类选择器优先
ID选择器
作用:选择一个标签
#id{
}
<p id="id"></p>
注意:
1)选择的标签必须要有ID属性
2)在同一个HTML页面中,建议不要出现俩个同名的ID属性的标签后面使用JavaScript代码选择标签的时候
getElemeById("id属性值")
3)id的优先级是最高的
并集选择器
.c1,#id{
}
作用:当多个选择器的css内容相同,那么可以使用并集选择器来合并css内容
交集选择器
div span(id span)(c1 span)
<div class="c1" id="id"><span></span></div>
作用:选择某个选择器中的子标签
通用选择器
*(代表所有的标签){
}
作用:选择到所有的标签的
伪类选择器
注意:
1)在css定义中 a:hover 必须被置于 a:link 和 a:visited 之后才有效,
2)在css定义中 a:active 必须被置于 a:hover之后才有效
正确顺序: link visited hover active
作用:控制标签在不同的状态下的样式
标签的四种状态
link: 没有访问的状态
a:link{
font-size:24px;
color:#f00; 红色
}
visited:已经访问过的状态(鼠标点下且松开)
a:visited{
font-size:24px;
color:#ccc; 灰色
text-decoration:none;
}
hover: 鼠标经过状态
a:hover{
font-size:24px;
color:#00f; 蓝色
text-decoration:none;
}
active:鼠标激活(按下去但是没有松开)的状态
a:active{
font-size:24px;
color:#0f0; 绿色
text-decoration:underline;
}
2.2常用的CSS属性和值
css文本
color: #000;文本的颜色
letter-spacing:10px字符间距
text-align:center ,right,left;对齐方式 默认左对齐
text-decoration:underline; 文本修饰 下划线underline 中划线-line-through 上划线 -overline 没有 none
单词间距
word-spacing:30px; 中间有空格的算词的分界线
css字体
字体类型
注意:这里的字体类型是读取系统的默认的字体库尽量使用通用的字体,如果你设置的字体
用户的系统没有,就是使用默认的宋体显示
font-family:“黑体”; 找系统里面支持的字体
字体大小
font-size:10px;
字体样式 正(normal) 斜(italic)
font-style:italic;
字体的粗细 bold加粗
font-weight;bold;
简写属性
font:字体样式italic 字体粗细bold 字体大小36px 字体类型 "黑体“
css背景
背景颜色
background-color:#00f;
背景图片
background-image:url(地址)
设置背景图片是否重复 或如何重复
no-repeat;不重复
repeat-x:x轴重复
repeat-y;y轴重复
repeat:x和y轴重复(默认的值)
background-repeat:no-repeat;
背景图片的起始位置
参数一:图片显示的起始位置
参数二:图片从指定的标签的那个位置开始显示
top left
center center
bottom right
background-position:top left;
简写属性
background:颜色 背景图片URL() 是否重复 no-repeat 位置 top center;
css列表
list-style-type
属性
disc 实心圆
circle 空心圆
square 方块
none:不要
list-style-image 作为列表单元前面的符号的图片
list-style-image:URL地址);
例子:
ul{
列表类型
list-style-type: square;
}
系统菜单
<ul>
<li></li>
<li></li>
<li></li>
</ul>
css表格
table{
合并表格边框
border-collapse:collapse;
}
css边框
div{
边框的颜色
简写属性
1)设置方向: 上 右 下 左 默认顺序
2)如果当前方向没有设置颜色:那么取对面的颜色
3)如果写一个则代表全部
border-color:#0f0 #00f #0f0 #c60;
border-left-color: 左边线的颜色
border-right-color: 右
border-top-color:上
border-bottom-color:下
边框的宽度
border-width:10px;
border-left-width;
border-right-width:
border-top-width:
border-bottom-width:
边框的样式***
solid 单实线
none:无
dashed 虚线
dotted:点
double:双实线
border-style:none;无
border-left-style:
border-right-style:
border-top-style:
border-bottom-style:
}
所有属性的简写属性:
border: 宽度 样式 颜色;
border:2px solid #f00;
3.盒子模型
3.1定义:
可以把HTML页面页面上的每一个标签看做是一个盒子
盒子相关的属性
宽度和高度:(width和height):决定;这个盒子的容量
设置边框
border:3px solid #000;
padding:内边距;边框和内容的距离
border:边框 盒子的厚度
设置内边距
padding-left:10px;
设置上边距
padding-top:10px;
盒子与盒子之间的距离
margin:外边距
css的定位
定位属性(
position:
属性
相对定位 :相对于元素原来的位置移动
relative
left 向右移(左边留空白)
top 向下移
决定定位:对于父标签而言当前的位置发生移动
用于广告
absolute
固定定位 对于浏览器而言,当前位置发生移动
(不会随着滚动条的滚动,位置发生改变)
fixed
CSS的布局漂浮
float
属性值:
none
left 文本属性流向对象的右边
right 文本属性流向对象的左边