CSS
概念
层叠样式表
- 层叠,多个样式可以作用在同一个html的元素上
好处:
- 功能强大
- 将内容的展示和样式的控制分离:减低耦合度,让分工更容易,提高工作效率
CSS的使用:
CSS和html的结合方式
三种方式:
- 内联样式表
在标签内使用style属性指定css代码
<div style="color";>hello world</div>
- 在head标签内,定义style标签,style标签的标签体内容就是css代码
<head>
<style>
div{
color:bule
}
</style>
</head>
- 外部样式表:
- 1.在css中定义资源文件
- 2.在head标签中,定义link标签来引入外部的资源文件
总结:
- 1,2,3,的作用范围越来越大
- 1方式不常用,常用的是方式2,3
还有一种不常见的外部样式表的写法:
在head标签中定义一个style标签,在style标签中导入css的文件
<head>
<style>
@import "a.css";
</style>
</head>
CSS的语法:
格式:
选择器{
属性名1:属性值1;
属性名2:属性值2;
...:...;
}
什么是选择器:(注意分号)
筛选具有相似特征的元素
选择器的分类
-
基本选择器
- id选择器:选择具体id属性值(建议在同一个html中id值唯一)
#id{ }
- 元素选择器:选择具有相同标签名称的元素
标签名称{ }注意:id选择器的优先级高于标签选择器的优先级
.class属性名{ }注意:类选择器的优先值高于id选择器,id选择器高于标签选择器
-
扩展选择器
-
选择所有元素:
*{ } -
并集选择器(表示了同时选择多个标签的情况)
选择器1,选择器2{ } -
子选择器(选择选择器1下的选择器2)
选择器1 选择器2{ } -
父选择器(筛选选择器2的父元素选择器1的元素)
选择器1>选择器2{ } -
属性选择器:选择元素名称,属性名=属性值的元素(一般用来选择input类型的标签)
元素名称[属性名="属性值"]{ } -
伪类选择器:选择一些元素具有的状态
- * link:初始状态 * visited:被访问过之后 * active:正在访问状态(鼠标按住不松开) * hover:鼠标悬停状态
元素:状态{ } a:link{ color:red; }
-
属性
1.字体,文本
- fort-size:字体大小
- color:颜色
- text-align:对其方式
- line-height:行高(非字体的高度)
2.背景
-
background
- 假设设置一个div的背景,先选择这个div然后设置
div{ bcakground:url("路径") no-repeat center; }
3.边框
- border:边框属性(这是一个复合属性,可以单独设置上下左右边框的属性)
4.尺寸
- width:宽度
- height:高度
5.盒子模型:主要是用来控制布局
- padding:内边距
- margin:外边距
核心就是确定:你的核心是谁(你的第一视角是针对谁的)
默认情况下:内边距会影响盒子的大小,可以使用box-sizing:border-box,使其不受影响.
- float:浮动
- left:使其浮动到上一个盒子模型的左边
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
