- CSS
- 选择器
- 字体属性
- 背景属性
- 文本属性
- 表格属性
1. CSS
1.1 CSS简介
CSS(Cascading Style Sheets)层叠样式表,又叫级联样式表,简称样式表。CSS文件后缀名为 .css 。CSS用于HTML文档中元素样式的定义。使用CSS可以让网页具有美观一致的页面
CSS规则由两个主要的部分构成:选择器,以及一条或多条声明(样式)。
语法:
- 选择器通常是需要改变样式的HTML元素
- 每条声明由一个属性和一个值组成
- 属性是希望设置的样式属性,每个属性有一个值。属性和值被冒号分开
1.2 CSS的引入方式
- 内联样式(行内样式)---- 缺乏整体性和规划性,不利于维护,维护成本高
要使用内联样式,需要在相关的标签内使用样式(style)属性。Style属性可包含任何CSS属性
<p style="background: orange; font-size: 24px;">CSS内联样式</p>
- 内部样式 ---- 单个页面内的CSS代码具有统一性和规划性,便于维护,但多个页面易混乱
当单个文档需要特殊的样式时,就应该使用内部样式表,可使用<style>标签在文档头部定义内部样式表。
<head>
<style>
h1{
background:red;
}
</style>
</head>
- 外部样式(推荐)
当样式需要应用于很多页面时,外部样式表将是最理想的选择。在使用外部样式表的情况下,可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在文档的头部。
<link rel="stylesheet" type="text/css" href="xxx.css">
2. 选择器(为元素匹配样式)
2.1 全局选择器
可以与任何元素匹配,优先级最低,一般做样式初始化
*{
margin:0;
padding:0;
}
2.2 元素选择器
HTML文档中的元素,p、b、div、a、img、body等
标签选择器,选择的是页面上所有这种类型的标签,所以经常描述“共性”,无法描述某个元素的“个性”。
<p>学完<span>前端</span>,继续学Java</p>
<style>
span{
color: red;
}
</style>
- 所有的标签,都可以是选择器。比如ul、li、label、dt、dl、input、div等
- 无论这个标签藏的多深,一定能够被选择上
- 选择的所有,而不是一个
2.3 类选择器 ---- 灵活
规定用圆点 . 来定义,针对想要的所有标签使用
<h2 class="oneclass">你好</h2>
/*定义类选择器*/
.oneclass{
width:800px;
}
class属性特点:
- 类标签可以被多种标签使用
- 类名不能以数字开头
- 同一标签可以使用多个类选择器,用空格隔开
<h3 class="classone classtwo">一个h3标题</h3>
2.4 ID选择器
针对某一个特定的标签使用,只能使用一次。css中的ID选择器以 # 定义
<h2 id="mytitle">你好</h2>
<style>
#mytitle{
border:3px dashed green;
}
</style>
- ID是唯一的
- ID不能以数字开头
2.5 选择器的使用
合并选择器
语法:选择器1,选择器2,…{ },作用:提取共同的样式,减少重复代码
.header,.footer{
height:300px;
}
选择器的优先级
CSS中,权重用数字衡量
- 元素选择器的权重为:1
- class选择器的权重为:10
- id选择器的权重为:100
- 内联样式的权重为:1000
优先级从高到低:行内样式 > ID选择器 > 类选择器 > 元素选择器
3. 字体属性
CSS字体属性定义字体颜色、大小、加粗、文字样式
- color,规定文本的颜色
<style>
p{
color: red;
color: #00ff00;
color: rgb(0, 0, 255);
color: rgba(255, 0, 0, .5);
}
</style>
- font-size,设置文本大小,chrome接受最小字体是12px
- font-weight,设置文本的粗细
值 | 描述 |
bold | 定义粗体字符 |
bolder | 定义更粗的字符 |
lighter | 定义更细的字符 |
100~900 | 定义由细到粗 400等同默认,而700等同于bold |
h1{font-weight:normal;}
- font-style,指定文本的字体样式
值 | 描述 |
normal | 默认值 |
italic | 定义斜体字 |
- font-family,指定一个元素的字体
font-family:"Microsoft YaHei","Simsun","SimHei";
//每个值用逗号隔开
//如果字体名称包含空格,它必须加上引号
4. 背景属性
CSS背景属性主要有以下几个:
属性 | 描述 |
background-color | 设置背景颜色 |
background-image | 设置背景图片 |
background-position | 设置背景图片显示位置 |
background-repeat | 设置背景图片如何填充 |
background-size | 设置背景图片大小属性 |
- background-color属性
<div class="box"></div>
<style>
.box{
width: 400px;
height:400px;
background-color: palevioletred;
}
</style>
- background-image属性 ---- 设置元素背景图片
元素的背景是元素的总大小,包括填充和边界(不包括外边距)。默认情况background-image属性放置在元素的左上角,如果图像不够大的话会在垂直和水平方向平铺图像,如果图像大小超过元素大小,则从图像的左上角显示元素大小的那部分。
<div class="box"></div>
<style>
.box2{
width: 400px;
height: 400px;
background-image: url("1.webp");
}
</style>
- background-repeat属性 ---- 设置如何平铺背景图像
值 | 说明 |
repeat | 默认值 |
repeat-x | 只向水平方向平铺 |
repeat-y | 只向垂直方向平铺 |
no-repeat | 不平铺 |
- background-size属性 ---- 设置背景图像的大小
值 | 说明 |
length | 设置背景图片宽度和高度,第一个值宽度,第二个值高度;如果只设置一个,第二个值auto |
percentage | 计算相对位置区域的百分比,第一个值宽,第二个值高度;如果只设置一个,第二个值auto |
cover | 保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小 ---- 图片有裁剪 |
contain | 保持图片纵横比并将图片缩放成适合背景定位区域的最大大小 ---- 未充满整个容器 |
- background-position属性 ---- 设置背景图片起始位置,默认值是:0% 0%
值 | 说明 |
left top | 左上角 |
left center | 左中 |
left bottom | 左下 |
right top | 右上角 |
right center | 右中 |
right bottom | 右下 |
center top | 中上 |
center center | 中中 |
center bottom | 中下 |
x% y% | 第一个值水平位置,第二个垂直位置,左上角0% 0%,右下角100% 100%;默认左上角0% 0%,如果只指定一个值,其他值默认50% |
xpos ypos | 单位是像素 |
5. 文本属性
- text-align ---- 指定元素文本的水平对齐方式
值 | 描述 |
left | 文本居左排列,默认值 |
right | 把文本排列到右边 |
center | 把文本排列到中间 |
- text-decoration ---- 规定添加到文本的修饰,下划线、上划线、删除线等
值 | 描述 |
underline | 定义下划线 |
overline | 定义 上划线 |
line-through | 定义删除线 |
- text-transform ---- 控制文本的大小写
值 | 描述 |
captialize | 定义每个单词开头大写 |
uppercase | 定义全部大写字母 |
lowercase | 定义全部小写字母 |
- text-indent ---- 规定文本块中首行文本的缩进
p{
text-indent: 30px;
}
负值是允许的,如果值为负数,将第一行左缩进。
6. 表格属性
- 表格边框 --- 指定CSS表格边框,使用border属性
table,td{
border: 1px solid red;
}
- 折叠边框 ---- border-collapse 属性设置表格边框是否被折叠成一个单一的边框或隔开
table,td{ border: 1px solid red; }
table{
border-collapse: collapse;
}
- 表格宽度和高度 ---- width 和 height属性定义表格的宽度和高度
table{ width: 100%; }
td{ height: 50px; }
- 表格文字对齐 --- 表格中的文本对齐和垂直对齐属性
// text-align属性设置水平对齐方式,向左、右、或居中
td{ text-align:center;}
// 垂直对齐属性设置垂直对齐
td{ height:50px; vertical-align:bottom;}
- 表格填充padding ----如果在表的内容中控制空格之间的边框,使用 td 和 th 元素的填充属性
td{
text-align: center;
vertical-align: top;
padding: 20px;
}
- 表格颜色 ---- 指定边框的颜色,和 th 元素的文本和背景颜色
table,td,th { border:1px solid green; }
td { background-color:green; color:white; }
补充:td 和 th 都属于 tr 子元素,td 表示内容单元格,是table data的意思;th 表示标题,一般用在一列的第一格,里面的内容会自动加粗加黑,是table heading的意思。
<table>
<tr>
<th>姓名</th>
</tr>
<tr>
<td>张三</td>
</tr>
<tr>
<td>李四</td>
</tr>
</table>