CSS语法
CSS样式由两个部分组成:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束.
CSS注释
/*这个是注释*/
CSS的几种引入方式
1. 行内样式
行内式是在标记的style属性中设定CSS样式,不推荐大规模使用.
<p style="color:red">你好!</p>
2.内部样式
内部样式,也就是嵌入式是将CSS样式集中写在网页的标签中标签中.
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
p {
background-color: #2b99ff;
}
</style>
</head>
3.外部样式
外部样式就是将css写在一个单独的文件中,然后在页面进行引入即可.推荐使用
<link href="样式名.css" rel="stylesheet" type="text/css/"/> # 引入语句
CSS选择器
基本选择器
/*元素选择器*/
p {color:red;}
/*ID选择器*/
#id {background-color:red;}
/*类选择器*/
.class {font-size: 15px;}
/*通用选择器*/
* {color:red;}
@注意:
样式类名不要用数字开头(有的浏览器不认识).
标签中的class属性如果有多个,要用空格分隔.
组合选择器
/*后代选择器*/
li a {color:green;} --li标签中的所有a标签设置字体颜色为绿色(包括下下级等所有的a标签)
/*儿子选择器*/
div>p {font-size:10px} --div标签中的下一级的p标签的字体为10px.(不包括下下级)
/*毗邻选择器*/
div+p {font-size:10px} --紧挨着div标签的一个p标签的字体为10px.
/*弟弟选择器*/
div~p {fond-size:10px} -- div标签之后的所有p标签字体为10px,不管中间穿不穿差其他标签
属性选择器
p[title] {color:red;} -- 含有title属性的p标签的颜色为红色.(属性也可以携带参数,更加精确找到标签)
分组和嵌套
/*分组*/ --> 当多个元素的样式相同的时候,我们没有必要重复地为每个元素设置样式,可以用逗号隔开
div,p {color: red;} -- 所有div和p标签的颜色都为红
/*嵌套*/ --> 多个选择器混合使用
.c1 p {color: red;} -- .cl下面的所有p标签的颜色都为红色
伪类选择器
a:link {color:red;} -- 未被访问过的连接为红色
a:hover {color:blue;} -- 鼠标悬停到链接上方的颜色为蓝色
a:active {color:yellow;} -- 鼠标右键选中后的颜色为黄色
a:visited {color:pink;} -- 已经被访问过的颜色为粉色
input:focus {background-color:red;} -- 文本框被选中后的样式
伪元素选择器
1. first-letteer
p:first-letter {font-size:48px;color:red;} -- p标签的第一个字符的字号为48px,颜色为red红
2. before
p:before {content="我是超哥!"} -- 在所有p标签前面插入"我是超哥!"这几个字符
3. after
p:after {content="我是超哥!"} -- 在所有p标签之后插入"我是超哥!"这几个字符
选择器 的优先级
内联选择器 --> id选择器 --> class选择器 --> 元素选择器 [--> 继承来的属性]
除此之外还可以通过!importent的方式来让样式强制生效(最好不要使用)
CSS属性相关
文字属性
1. 文字对齐
text-align
- left:左对齐,
- right:右对齐,
- center:居中对齐,
- justfy:两端对齐
2. 文字装饰
text-decoration
- none:定义标准的文本
- underline:定义文本下的一条线
- overline:定义文本上的一条线
- line-through:定义穿过文本中心的一条线
- inherit:继承父类到的tetx-decoration
3. 首行缩进
text-indent:32px; -- 首行缩进32px
4. 文字间的距离
letter-spacing: 5px; -- 将文字的间距调整为5px
5. 去掉li标签的样式
list-style:none;
背景属性
1. 背景颜色
background-color:red
2. 背景图片
background-image:url("1.jpg")
3. 背景重复
- repeat(默认):背景图片平铺排满整个网页
- repeat-x:背景图片只会在水平方向上平铺
- repeat-y:背景图片只会在垂直方向上平铺
- no-repeat:背景图片不平铺
4. 背景位置 -- 对精灵图的设置
background-position: left top;
background-position: 200px 200px
@注意:还可以简写
background:red url('1.png') no-repeat left top;
边框
1. 边框属性
- border-width
- border-style
- border-color
- 通用简写方式 p { border: 2px solid red;}
2. 边框样式 border-style
- none:无边框
- dotted:点状虚线边框
- dashed:矩形虚线边框
- solid:实线边框
@边框还可以单独的为某方向的边框设置样式
3. 边框设置圆角(这个也可以把一个矩形变为圆形,参数为50%就可以)
border-radius
display属性
1. 用于控制HTML元素的显示效果
- display:none : HTMl文档中元素存在,但是浏览器中不显示
- display:block : 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充下面的部分
- display:inline : 按行内元素显示,此时再设置元素的width,height,margin-top,margin-bottom和float属性都不会有什么影响
- display:inline-block : 使元素同时具有行内元素和块级元素的特点
2. display:none 和 visibility:hidden的区别:
visibility:hidden : 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间.也就是说,该元素虽然被隐藏了,但是仍然会影响布局.
display:none : 可以隐藏某个元素,并且隐藏的元素不会占用任何空间.也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失.
盒子模型
1. margin: 用于控制元素与元素之间的距离;margin的最基本的用途就是控制元素周围空间的间隔,从视觉角度上达到隔开的目的.
2. padding: 用英语控制内容和边框之间的距离.
3. border(边框): 围绕在内边距和内容外的边框
4. content(内容): 盒子的内容,显示文本和图像
______________________________________________
| margin(外边框) |
| _______________________________________ |
| | border(边框) | |
| | ____________________________ | |
| | | padding(内填充) | | |
| | | ___________________ | | |
| | | | | | | |
| | | | content(内容) | | | |
| | | | | | | |
| | | |___________________| | | |
| | | | | |
| | |___________________________| | |
| | | |
| |______________________________________| |
| |
|______________________________________________|
float浮动
在css中任何元素都可以浮动
浮动元素会生成一个跨级框,而不论本身是什么元素
浮动的两个特点:
1. 浮动框可以向左或者向右移动,直到他的外边缘碰到包含框或另一个浮动框的边框为止.
2. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在
三种取值:
1. left: 向左浮动
2. right: 向右浮动
3. none: 默认值,不浮动
clear
clear属性规定元素的那一侧不允许其他浮动元素
- left: 在左侧不允许浮动元素.
- right: 在右侧不允许浮动元素
- both: 左右两侧都不允许浮动元素
- none: 默认值,允许两侧浮动
- inherit: 规定应该从父元素继承clear属性
@注意: clear属性只会对自身起作用,而不会影响其他元素
清除浮动:
清除浮动的副作用(父类塌陷问题)
主要有三种方法:
1. 固定高度
2. 伪元素清楚法 (使用较多)
3. overflow:hidden
.clear:after {content=""; display=block; clear:both;}
overflow溢出属性
visible: 默认值.内容不会被修剪,会呈现到元素框之外
hidden: 内容会被修建,并且其余内容不可见
scroll: 内容会被修建,则浏览器会显示滚动条以便查看其余内容
auto: 如果内容被修建,则浏览器会显示 滚动条以便查看其余内容
inherit: 规定应该从父类继承overflow属性的值
- overflow (水平和垂直都设置)
- overflow-x (设置水平方向)
- overflow-y (设置垂直方向)
max-最大宽度
min-最小宽度
定位(position)
static:
默认值,无定位,不能当做绝对定位的参照物,并且设置标签对象的left,top等值是不起作用的
relative(相对定位):
相对定位是相当于钙元素在文档流中的原始位置,即以自己原始位置为参照物.有趣的是,即使设置了元素的相对定位以及偏移值,元素还站着原来的位置,即占据文档流空间,对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档中的偏移位置.而其层叠通过z-index属性定义
@注意: position: relative的一个主要方法:方便绝对定位元素找到参照物
absolute(绝对定位):
设置为绝对定位的元素框从文档流完全删除,并且相对于最近的已定位祖先元素定位,如果元素没有已定位的祖先元素,那么他的位置相对于最初的包含块(即body元素).元素原先在长长文档流中所占的空间会关闭,就好像该元素原来不存在一样.元素定位后生成一个块级框,而不论原来他在正常流中生成何种类型的框.
fixed(固定):
对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
@注意:在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
脱离文档流: 绝对定位,固定定位
不脱离文档流: 相对定位
z-index
设置对象的层叠顺序。
- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
- 从父现象：父亲怂了，儿子再牛逼也没用
opacity设置透明效果
用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。