CSS 页面美化和布局控制
概念：
Cascading Style Sheets 层叠样式表
- 层叠：多个样式可以作用在同一个html元素上，同时生效
好处
- 功能强大
- 将内容展示和样式控制分离
- 降低耦合度
- 让分工协作更容易
- 可以提高开发效率
CSS使用
CSS与html结合方式
- 内联样式
- 在标签内使用style属性指定css代码
- 内部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
color: blue;
}
</style>
</head>
<body>
<!--内部样式
* 在head标签内，定义style标签，style标签的标签体内容就是css代码
-->
<div>Hello Css</div>
</body>
</html>
- 外部样式
- 在head标签内 定义link标签，引入外部的资源文件
a.css
div {
color: lightgreen;
}
* head中link标签引入
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/a.css"/>
</head>
注意：
- 1，2，3 三种方式 css作用范围越来越大
CSS语法
格式
选择器{
属性名1:属性值1;
属性名2:属性值2;
...
}
注意： 每一对属性要用,隔开，最后一对属性可以不加；
选择器
分类
基础选择器
- id选择器 选择具体的id属性值的元素
* 语法：#id属性值{}
<style>
#div1{
color:red;
}
</style>
<div id="div1">永不妥协</div>
- 元素选择器
选择具有相同标签名称的元素
- 语法：标签名称{}
div {
color: green;
}
注意 id选择器优先级高于元素选择器
- 类选择器
选择具有相同的class属性值的元素
- 语法 .class属性值{}
.cls1 {
color: blue;
}
<p class="cls1">道不同不相为谋</p>
注意：类选择器优先级高于元素选择器
以上选择器中 id选择器优先级>类选择器优先级>元素选择器优先级
扩展选择器
- 选择所有元素：
- 语法 *{}
通用选择器，会选择所有元素
- 并集选择器
- 语法 选择器1,选择器2{}
- 子选择器 筛选选择器1下的选择器2
- 语法 选择器1 选择器2{}
- 父选择器 筛选选择器2上的父元素选择器1
- 语法 选择器1>选择器2{}
- 属性选择器 选择元素名称,属性名=属性值的元素
- 语法 元素名称[属性名=‘属性值’]{}
<input type="text">
/*属性选择器*/
input[type='text'] {
border: 1px solid red;
}
- 伪类选择器 选择一些元素具有的状态
- 语法：元素:状态{}
a:link {
color: deeppink;
}
a:hover {
color: blueviolet;
}
a:active {
color: greenyellow;
}
a:visited {
color: black;
}
<a href="#">去死吧</a>
属性(常见)
- 字体 文本
- font-size:字体大小
- color:文本颜色
- text-align:文本对齐方式
- line-height:行高
- 背景
- background 背景 复合属性
- 边框 轮廓
- border:边框 复合属性
- 尺寸
- 宽度:width
- 高度:heigh
- 盒子模型 控制布局
- margin:外边距
- padding:内边距
- 默认情况下 内边距会影响盒子的大小
网友评论