CSS|常用CSS属性
一. 文本属性
1 字体相关
1) 大小font-size
作用
设置字体大小
示例
h1 {
font-size:20px;
}
2) 字体font-family
作用
设置字体
示例
body {
font-family: Arial,Microsoft Yahei,sans-serif
}
- san-serif : 非衬线字体(文字的笔画粗细是一样的, 如黑体)
- serif: 衬线字体(文字的笔画有尖角, 如宋体)
会依次查找电脑上的字体, 如果都没有, 就使用一种非衬线字体
3) 粗细font-weight
作用
设置文本的粗细
示例
div {
font-weight: bold
}
| 属性值 | 描述 |
|---|---|
| normal | 默认值（不加粗的） |
| bold | 定义粗体（加粗的） |
| 100~900 | 400 等同于 normal，而 700 等同于 bold 我们重点记住这句话 |
4) 风格font-style
作用
设置文本的倾斜
div {
font-style: italic
}
5) 常用连写
font是可以连写的, 通常连写也是很常见的
选择器 { font: font-style font-weight font-size/line-height font-family;}
示例
body {
font: 16px "Microsoft Yahei"
}
2 外观
1) color
作用
color属性用于定义文本的颜色
| 表示表示 | 属性值 |
|---|---|
| 预定义的颜色值 | red，green，blue |
| 十六进制(使用的最多) | #rrggbb, #FF0000，#FF6600，#29D794 |
| RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
R: red红色, #00~#FF(0~255), 前两位
G: green绿色, #00~#FF(0~255), 中间两位
B: blue蓝色,#00~#FF(0~255), 后两位
2) 文本对齐
text-align
作用
设置文本内容的水平对齐方式
| 属性 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
3) 行高
line-height
作用
属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高
行高通常用于设置单行文本垂直居中
4) 装饰线
text-decoration 通常我们用于给链接修改装饰效果
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 取消下划线（最常用） |
| underline | 定义文本下的一条线。下划线 也是我们链接自带的（常用） |
| overline | 定义文本上的一条线。（不用） |
| line-through | 定义穿过文本下的一条线。（不常用） |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>综合案例</title>
</head>
<body>
<article>
<h1 class="title tac">加强反垄断监管是为了更好发展</h1>
<div class="sub-title tac">
<span class="date">2020年12月20日</span>
<span class="author">腾讯新闻 （20人参与）</span>
<a href="">收藏本文</a>
<input type="text" value="请输入查询条件" />
<button>搜索</button>
</div>
<hr />
<p>
近日，市场监管总局根据举报，在前期核查研究的基础上，对阿里巴巴集团控股有限公司实施“二选一”等涉嫌垄断行为立案调查。这是我国在互联网领域加强反垄断监管的一项重要举措，有利于规范行业秩序、促进平台经济长远健康发展。
</p>
<p>
近年来，我国线上经济蓬勃发展，新业态、新模式层出不穷，对推动经济高质量发展、满足人民日益增长的美好生活需要发挥了重要作用。但与此同时，线上经济凭借数据、技术、资本优势也呈现市场集中度越来越高的趋势，市场资源加速向头部平台集中，关于平台垄断问题的反映和举报日益增加，显示线上经济发展中存在一些风险和隐患。近期召开的中央政治局会议和中央经济工作会议均明确要求强化反垄断和防止资本无序扩张，得到社会热烈反响和广泛支持。可见，反垄断已成为关系全局的紧迫议题。
</p>
</article>
</body>
</html>
二. 背景相关属性
什么是叫背景
背景的概念最早提出是在摄影和图像处理领域,
主要目的是为了突出主体, 通常会用一个背景来衬托. 比如证件照
网页一开始主要也是来处理文字和图片, 就借鉴了背景这个概念
背景可以纯色的, 也可以是一张图片
1 背景颜色(color)
语法
background-color:颜色值; 默认的值是 transparent 透明的
如果要设置背景, 元素必须有宽高!
2 背景图片(image)
语法
background-image : none | url (url)
| 参数 | 作用 |
|---|---|
| none | 无背景图（默认值） |
| url | 使用相对地址指定背景图像 |
background-image : url(images/demo.png);
3 背景平铺(repeat)
默认情况下背景图片是铺满整个容器的, 就好比贴地板, 这样做的好处是可以减小整个图片的体积, 加快网站的访问速度
语法
background-repeat : repeat | no-repeat | repeat-x | repeat-y
| 参数 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺（默认的） |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向平铺 |
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-image: url('./images/bg.jpg');
}
</style>
</head>
<body></body>
</html>
4 背景位置(position)
语法
background-position : length || length
background-position : position || position
| 参数 | 值 |
|---|---|
| length | 百分数 | 由浮点数字和单位标识符组成的长度值 |
| position | top | center | bottom | left | center | right 方位名词 |
5 背景简写
建议
background: 背景颜色 背景图片地址 背景平铺 背景位置
示例
background: transparent url(image.jpg) repeat-y center top ;