一、
1、CSS
1、什么是CSS
Cascading Style Sheet层叠样式表
级联样式表
样式表
2、作用
实现了内容与表现的分离提高了代码的可重用性和可维护性
2、CSS样式表使用方式
使用方式共分三种，使用任何一种都可以更改页面的样式。1、内联方式
内联样式将CSS样式定义在HTML的标签中
特点：不通用，只能定义某一标签的单独样式。
2、内部样式表
将一系列样式定义在HTML的<head>中特点:当前网页任何一个标签都可以使用，体现出可重用性。
3、外部样式表
将样式定义在外部的css文件中，可以由任何一个页面进行样式表的引用特点：真正意义的实现了样式表的可重用性
3、内联方式的CSS
定义在HTML标签中的style属性里<h2 style="样式规则"></h2>
CSS语法:
样式规则:属性名称:属性值
color:red
background-color:blue
多个规则之间，用;进行区分
background-color:blue;color:red;
4、内部样式表
样式内容出现在<head>中的<style>中<head>
<title></title>
<style>
/*
这里是注释
*/
/*这里是注释*/
</style>
</head>
样式组成:选择器和样式声明
选择器:决定哪些元素能够使用定义好的规则
样式声明:由一对大括号包围着所有的样式规则
选择器
{
/*样式规则*/
属性名称:属性值;
属性名称:属性值;
}
5、外部样式表
step1:创建一个文件已css作为后缀step2:在文件中写样式相关代码
选择器
{
属性名称:属性值;
}
step3:在页面中对css文件进行引用
<head>
<link rel="stylesheet" type="text/css" href="引入样式表的地址" />
<style>
@import "css/style.css";
/*其他样式定义*/
</style>
</head>
6、CSS样式表特征
1、继承性
大部分的样式属性是可以被继承的<body>
<p></p>
</body>
body
{
font-size:12px;
}
2、层叠性
可以为一个标签定义多个样式不冲突时，多个样式可以合并成一个
h1
{
color:red;
}
h1
{
background-color:yellow;
}
h1
{
font-size:20px;
color:green;
}
合并后:
h1
{
color:red;
background-color:yellow;
font-size:20px;
}
3、优先级
样式定义冲突时，会根据样式规则的优先级进行应用样式内联样式1000 ID0100 伪类0010 类0010 元素0001
其次：内部样式表和外部样式表,就近原则
4、调整优先级
!important语法 ：
选择器{属性:属性值 !important;}
7、选择器
规定了哪些元素能够使用定义好的样式1、通用选择器
表示:*可以与任何一个元素匹配
多数用在设置网页整体的默认样式
*
{
font-size:12px;
font-family:"Microsoft Yahei";
}
2、元素选择器
由html元素名称作为选择器作用：用于修改当前选择器所对应的元素的默认样式
表示:元素名称
p{font-size:12px;}
div{color:red;}
3、类选择器
语法:.className{}注意:类名不能以数字开始
.1234 错误
.font
使用:能够附带class属性的元素都能使用类选择器,将元素的class属性设置为类名即可
一个标签也可以同时引入多个类选择器
<div class="c1 c2">
表示div同时引用了c1类样式和c2类样式
类选择器和元素选择器结合使用:
能够实现对某种元素中不同样式的细分控制。又称之为"分类选择器"
语法:元素选择器.类选择器{}
p.important{}
4、id选择器
特点:作用于指定id属性值得元素上语法:#idName{}
#header{ .... }
<div id="header"></div>
id属性:
1、标识元素的唯一的值
2、引用样式表中的id样式
5、群组选择器
选择器的声明是以逗号","隔开的选择器列表作用:将相同的规则用于多个元素中
语法:选择器1,选择器2,..{}
6、后代选择器
<div><span>
<span class="s1"></span>
</span>
</div>
作用:根据元素的位置关系(层次)找到元素，然后改掉样式
语法:选择器1 选择器2{}
div span{} /*div里所有的span
div .s1{}
7、子代选择器
子代：只描述父子关系的,标签嵌套也局限于父子关系的嵌套<fieldset>
<span class="s1"></span>
<div>
<span class="s2"></span>
</div>
</fieldset>
span.s1是fieldset的子代元素
span.s2是fieldset的子代元素吗?不是!是div的子代元素,是fieldset的后代元素。
语法:
选择器1>选择器2{}
fieldset>span{}
fieldset>.s1{}
8、伪类选择器
作用:为一些选择器添加特殊的效果,多数表示的是一个元素(选择器)的不同状态语法: 通过 : 作为结合符
选择器:伪类选择器
伪类的分类:
链接伪类
动态伪类
目标伪类
元素状态伪类
结构伪类
否定伪类
链接伪类:
:link 尚未访问的链接
:visited 访问过的链接状态
a:link{}
a:visited{}
动态伪类:
:hover 鼠标悬停在元素上的状态
:active 元素被激活时的状态
:focus 元素获取焦点时的状态
需要掌握:
:link
:visited
:hover
:active
8、选择器的优先级
<div id="d1" class="red"></div>div{color:blue;}
#d1{color:green;}
.red{color:red;}
优先级:
内联>ID>类(伪类)>元素
9、颜色
#rrggbb : 6位16进制数字每一位的范围:0-9 A-F
#3A7765
#000080 : 蓝色
#B9E5FC :
#FFAA11 -> #FA1
10、尺寸
在HTML中哪些元素适合使用尺寸属性1、所有的块级元素
div,p,h1...ul ol li
2、大部分行内元素不适合使用尺寸属性
span
3、存在width与height属性的元素
img,table ... ...
11、边框
border:边框方向:
left,right,top,bottom
大小:
width
样式:
style
颜色:
color
border:四个方向的 大小 样式 颜色
border:大小 样式 颜色;
border-方向:大小 样式 颜色;
border-颜色:
border-样式:
border-大小:
border-方向-颜色:
border-方向-样式:
border-bottom-width:10px;
border-style:solid;
border-bottom:1px solid black;
12、边框阴影
box-shadow:向方框添加阴影box-shadow:h-shadow v-shadow blur spread color inset
h-shadow:必选，水平阴影偏移距离
v-shadow:必选，垂直阴影偏移距离
blur : 可选，模糊程度
spread : 可选，阴影尺寸
color : 可选阴影颜色
inset : 可选，将外部阴影改为内部阴影(outset)
13、图片边框
由图像作为元素的边框显示效果border-image:src width repeat
repeat:
repeat: 平铺
round : 铺满
stretch : 拉伸
border-image-source:图片的路径
border-image-source:url(img/aa.jpg);
border-image-width:图片边框宽度
border-image-repeat:边框平铺
repeat,round,stretch
14、轮廓
轮廓(outline)是绘制于元素周围的一条线，在边框的外围语法:
outline:color style width;
outline-color:
outline-style:
outline-width:
二、
1、外边距-margin
1、取值margin:10px; -->上下左右各10px
margin:5px 10px; -->上下5px 左右10px
margin:5px 10px 5px;-->上5px 左右10px 下5px
margin:5px 10px 5px 10px;
上5px 右10px 下5px 左10px
2、外边距合并
当上下外边距相遇时，它们将形成一个外边距，称之为合并外边距。最终的边距距离，以数值大的为准。
2、内边距 - padding
1、什么是内边距内容区域与边框之间的空间
注意:会扩大元素边框所占用的区域
2、赋值
padding:value;
内边距属性值可以为像素、百分比，不能是负数
padding-left:
padding-right:
padding-bottom:
padding-top:
padding:value(上下) value(左右);
padding:v1(上) v2(左右) v3(下);
padding:v1(上) v2(右) v3(下) v4(左);
3、CSS重写
目的：去除有些标签默认显示效果hn
p
ul
ol
dl dt dd
方式：将margin padding 全部设置为0 , 将 list-style-type:none;
4、背景图像
1、背景图像尺寸
属性:background-size取值:
v1 v2 : 宽度 高度
v1% v2% : 原始大小的百分比
cover : 扩展背景图像，使背景图完全覆盖背景区域
contain:将图像扩展至最大尺寸，使宽度和高度自适应内容区域(按比例拉伸)
2、背景图片固定
属性:background-attachment值:
scroll:滚动，默认值
fixed : 背景图像固定
3、背景定位
属性:background-position值:
left
right
top
bottom
center
x% y%:第一个值表示水平偏移量，第二个值，垂直偏移量
x y:x表示水平偏移量，y表示垂直偏移量
4、背景绘制区域(颜色)
属性:background-clip取值:
border-box:背景被裁剪到边框,默认值
padding-box:背景被裁剪到内边距框
content-box:背景被裁剪到内容框
5、背景定位区域(图像)
属性:background-origin取值:
border-box:
padding-box:
content-box:
6、背景属性
在以个属性中声明所有的相关的背景属性语法:
background:color url() repeat attachment position;
background:red url(user.jpg) no-repeat -35px 25px;
5、渐变
raidal-gradient([size at postion])
size:半径
postion:
left
top
bottom
right
x y : 距离左上方圆心定位
三、
1、控制字体
1、指定字体
属性:font-family:value value value;2、字体大小
font-size:value;3、字体加粗
font-weight:取值:
bold : 加粗 <b></b>
normal : 正常
value :
100
200....900...
400 : normal
900 : bold
4、字体样式(斜体)
font-style:取值:
normal
italic <i></i>
5、小型大写字母
font-variant取值:
normal
small-caps
6、字体属性
font:font-style font-variant font-weight font-size font-family;font:12px Times,New York,微软雅黑
2、控制文本格式
1、文本颜色
属性:color2、文本水平对齐方式
text-align:left/center/right3、文字线条修饰
属性:text-decorationnone
underline 下划线
overline 上划线
line-through 删除线
4、行高
注意:如果行高的高度高于文本自身的高度的话，那么文本将在这段区域内垂直居中显示属性:line-height
取值:
常用值 与所在容器设置相同高度
5、首行文本缩进
属性:text-indent取值:缩进的距离 比如:20px
6、文本阴影
属性:text-shadow:h-shadow v-shadow blur color;
7、文本溢出
1、处理空白
white-space:normal/nowrap2、文本溢出
text-overflow:取值:
clip:不显示
ellipsis:使用 ... 替代溢出文本
注意:text-overflow属性，配合着 overflow:hidden 联用
否则，text-overflow无效果
8、文本换行
1、长单词换行
long long longlonglonglong
属性:word-wrap
取值:
noraml
break-word
2、文本换行
word-break:取值:
normal 正常
break-all:不关心单词显示完整的问题，该换就换
keep-all:当单词到达边界处后根据半角空格" "和连字符"-"
3、表格
1、表格特有属性
1、边框合并
属性:border-collapse取值:
separate(默认值)
collapse(边框合并)
2、边框边距
table的属性cellspacing注意:必须是border-collapse为separate的时候才有作用
属性:border-spacing
取值:
v1 : 水平和垂直方向的距离都是v1
v1 v2 : v1表示水平间距,v2表示垂直间距
3、标题位置
属性:caption-side取值:
top: 默认
bottom: 靠下
4、显示规则
固定布局属性:table-layout
取值:
auto : 列宽度由单元格内容来决定
fixed : 列宽度由表格宽度和列宽决定，不受内容所影响
1741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
