一、CSS概念
CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)
Css是用来美化html标签的,相当于页面化妆。
样式表书写位置:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
样式表内容
</style>
</head>
二、选择器
选择器是一个选择谁(标签)的过程。
写法:选择器{属性:值;属性:值}
属性:
属性 | 解释 |
Width:20px; | 宽 |
Height:20px; | 高 |
Background-color:red; | 背景颜色 |
font-size:24px; | 文字大小 |
text-align:left | center| right | 内容的水平对齐方式 |
text-indent:2em; | 首行缩进 |
Color:red; | 文字颜色 |
1、基础选择器
(1) 标签选择 标签{ 属性:值;}
特点:所有的标签全部生效类选择器
(2) 类选择器 .自定义类名{ 属性:值;}
特点:谁调用,谁生效
一个标签可以调用多个类选择器(中间用空格隔开)
一个类选择器可以被多个标签调用
类选择器命名规则:不能使用纯数字或者数字开头来定义类名
不能使用特殊符号(_除外)
不推荐使用汉子来定义类名
不推荐使用标签名,属性,属性值来定义类名
(3) Id选择器 #自定义名{ 属性:值;}
特点:谁调用,谁生效
一个标签只能调用一个ID选择器
一个id选择器在一个页面只能被调用一次
(4) 通配符选择器 *{属性:值;}
特点:整个页面所有标签调用
2、复合选择器
(1) 集选择器 标签+类(id)选择器{ 属性:值;}
注:中间不可以有空格
特点:既是某个标签,而且这个标签调用了类(id)选择器
(2)后代选择器 选择器+空格+选择器{ 属性:值;}
基本要求:包含(嵌套)关系
特点:父在前,子在后。
无限制隔代。
标签选择器,类选择器,ID选择器可以自由组合。
(3)子代选择器 选择器>选择器 { 属性:值;}
特点:选择的是直接下一代
(4)并集选择器 选择器+,+选择器+,+选择器{ 属性:值;}
注:中间是逗号
三、样式表书写位置
(1)内嵌式写法
<head>
<style type=”text/css”>
样式表写法
</style>
</head>
(2) 外链式写法
<link rel=”stylesheet” href=”1.css”>
(3)行内样式表
<h1 style=”font-size:30px;color:red;”>今天周五</h1>
总结:
内嵌式写法:样式只作用于当前文件,没有真正实现结构表现分离。
外链式写法:作用范围是当前站点,范围广,真正实现结构表现分离。
行内样式表:作用范围仅限于当前标签,范围小,结构和表现完全混为一谈,不推荐使用。
四、标签分类(显示方式)
1、块元素
典型代表:div, h1-h6, p, ul, li
特点:独占一行
可以设置宽高
嵌套包含下,资款元素宽度(没有定义的情况下和父块元素默认一致)
2、行元素
典型代表:span, a, strong, em, del,ins
特点:在一行上显示
不能直接定义宽高(宽高为内容撑开宽高)
3、行内块元素(实际上没有,自己总结)
典型代表: input, img
特点:在一行上显示
可以设置宽高
4、块元素、行元素之间的转化
(1)块元素转行内元素:display:inlline
<style type=”text/css”>
Div,p{
Display:inline;
}
</style>
<div>周五</div>
<p>18岁!</p>
(2)行内元素转块元素:display:block
(3)块和行内元素转行内快元素:display:inline-block
特点:将块元素,行元素一起转为行内块元素
原来的块元素和行元素都在一行,可以设置宽高。
<style type="text/css">
div,span,input{
display: inline-block;
}
</style>
<body>
<div>张娇娇</div>
<span>努力学习</span>
<input type="text" value="一定会找到好工作!">
</body>
五、CSS三大特性
1、层叠性
当多个样式作用于同一个(同一类)标签时,样式发生了冲突,总是执行后面的代码。
2、继承性
发生的前提:包含、(嵌套)关系
文字颜色、大小、字体、字体粗细、风格、行高可以继承
总结:文字的所有属性都可以继承
特殊情况:h1-h6不能继承文字大小(浏览器内核单独给他大小)
A标签颜色不能继承(浏览器内核单独给他一个颜色)
3、优先级
默认选择器 < 标签选择器 < 类选择器 < ID选择器 < 行内选择器 < !important
0 1 10 100 1000 1000以上
Important用法:div{
corlor:red !important;
}
优先级特点:继承的权重为0
权重会叠加 (100个标签干不过一个类)
六、链接伪类
1、a:link{ 属性:值 } a{ 属性:值 } 两者效果一样
方法:a:link { 属性:值 } 链接默认状态
a:visited { 属性:值} 链接访问之后的状态
a:hover { 属性:值} 鼠标放到链接上显示的状态
a:active { 属性:值} 链接激活的状态(点击,一直按着)
:focus { 属性:值} 获取焦点
用法:a:active{
color:red;
}
<a>这是点击后的状态,是红色</a>
2、文本修饰
链接默认情况下有下划线,可通过以下方法修饰
text-decoration : none | underline | line-through
无下划线 有下划线 删除线
七、背景属性
1、属性
background-color 背景颜色
background-image 背景图片
.box{
background-image : url (“1.png”);
}
background-repeat 背景平铺
默认平铺repeat
设值no-repeat | repeat-x |repeat-y
background-position 背景定位
设值:left | right | center | top | bottom
background-position:right;
方位值只写一个时,另外一个值默认居中。
background-position:right,bottom;
写两个方位值时,顺序没有要求
background-position:20px,30px;
写两个具体指的时候,第一个值代表水平方向,第二个值代表垂直方向
background-attachment 背景是否滚动 scroll | fixed
Scroll:背景滚动
Fixed:背景固定
注:背景的位置是相对于浏览器而言,不是相对于盒子而言。
2、背景连写
background:red url(1.png) no-repeat bottom scroll;
图片不可以省,其他都可以省,
顺序不作要求