Web前端开发之CSS

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>