0. CSS概述
-
作用 : 页面美化和布局控制
-
概念 : 层叠样式表(层叠 : 多个样式可以作用在一个HTML元素上,同时失效)
1. CSS与HTML结合
-
三种结合方式 :
1.内联样式 :
- 在HTML标签内加入style属性,在style属性里写css代码
- 没有降低耦合性,不常用
- 作用域 : 标签
2.内部样式
- 在head标签里定义style标签,在style标签里写css代码
- 作用域 : 此网页
3.外部方式
- 新建一个css文件夹,定义css文件,在里面写css代码
- 在head标签里定义link标签,在link的href属性里写css代码的URL
- 作用域 : 全部
示例 :
方式1 :
<div style = "color:red;"> dddd </div>
方式2 :
<head>
<style>
div{
color:red;
}
</style>
</head>
<body>
<div>dddd</div>
</body>
方式3 :
css文件夹下a.css:
div{
color:red;
}
html:
<head>
<link rel = "stylesheet" href = "css/a.css">
</head>
<div>dddd</div>
2. 语法格式
-
格式 :
选择器{ 属性名1:属性值1; 属性名2:属性值2; ... }
-
选择器 : 筛选具有相似特征的元素
-
最后一对属性键值对可以不加分号
3. 选择器
3.1 基础选择器
3.1.1 id选择器
-
语法 :
#id属性值{ }
-
id建议唯一,在标签中定义id值
3.1.2 元素选择器(标签)
-
针对具有相同标签的元素
-
语法 :
标签名称{ }
-
id选择器优先级大于元素选择器
3.1.3 类选择器
-
语法 :
.class属性值{ }
-
在标签中定义class属性值,需要相同时建议class
-
类选择器优先级大于元素选择器
3.1.4 优先级
id>class>元素
3.2 拓展选择器
3.2.1 通用选择器
语法 :
*{
}
全局所有都生效
3.2.2 并集选择器
- 对多个选择器同时生效
语法 :
选择器1,选择器2{
}
3.2.3 子选择器
- 通过空格筛选父选择器下的子选择器
语法 :
选择器1 选择器2{
}
3.2.4 父选择器
- 筛选子选择器2下的父选择器1
语法 :
选择器1>选择器2{
}
3.2.5 属性选择器
- 选择该元素下属性名=属性值的元素
语法 :
元素名称[属性名="值"]{
}
<!-- 示例 -->
<style>
input[type="text"]{
boder : 5px solid;
}
</style>
<input type = "text">
3.2.6 伪类选择器
- 用来控制一些元素具有的状态
- 例如超链接标签a具有的状态有:
- link : 初始化状态
- visited : 被访问过的状态
- active : 正在访问状态
- hover : 鼠标悬浮状态
语法 :
元素 : 状态{
}
<!-- 示例 -->
<style>
a:link{
color:pink;
}
a:link{
color:yellow;
}
a:link{
color:red;
}
a:link{
color:black;
}
</style>
<a hred = "#">d</a>
4. 属性
4.1 字体,文本
4.1.1. font-size,字体大小
4.1.2. color, 文本颜色
4.1.3. text-align, 对齐方式
text-align : center;//水平居中
字体垂直居中:
line-height:边框高度;
4.1.4. line-height, 行高
4.2 背景
4.2.1 background
-
复合属性
-
背景图 : 在background里面写url("")属性
-
默认重复,在url后面加上no-repeat表示不重复
-
示例
background:url("") no-repeat center;
-
再加上center属性,表示图片居中显示
-
4.3 边框,轮廓
4.3.1 边框(border)
- 是一个复合属性
- 通常 : border : 1px(边框大小) solid(实线) red(边框颜色);
4.4 尺寸
4.4.1 width: 宽度
4.4.2 height:高度
4.5 盒子模型
- 内外边距仅因为参考系不同
4.5.1 margin,外边距
margin : 50px;
代表上下左右都是50px
margin-left针对左
margin : auto;水平居中
4.5.2 padding, 内边距
-
默认情况下内边距会影响整个盒子的大小
-
此时需要设置盒子属性使盒子最终大小先确定 :
box-size : border-box;
4.5.3 float, 浮动
- left,左浮动
- right, 右浮动
- center