HTML5为网页添加样式及常见的样式声明[ID选择器、元素选择器、类选择器]
为网页添加样式
一、术语解释
h1{
color: red;
background-color: lightblue;
text-align: center;
} CSS规则 = 选择器 + 声明块
1.1选择器
ID选择器：选中的是对应id值的元素。
<style> #test{ color: aquamarine; } </style> <p>Lorem ipsum dolor sit.</p> <p id="test">Lorem ipsum dolor sit amet.</p> <p>Lorem, ipsum dolor.</p> <p>Lorem ipsum dolor sit amet consectetur.</p>元素选择器
元素标签符号 + {} 在大括号里面填写CSS代码,这样会使所有的元素选中。p{ color: aquamarine; }类选择器
选中的是与class的属性有关。
用法： . + class的属性值
1.2声明块
出现在大括号中
声明块中包含很多声明(属性),每一个声明(属性)表达了某一方面的样式。
二、CSS代码书写的位置
- 内部样式表:直接书写在元素的style元素中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.red{
color: red;
font-size: 2em;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit.</p>
<p class="red">Lorem ipsum dolor sit amet.</p>
<p>Lorem, ipsum dolor.</p>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</body>
</html> - 内联样式表,元素样式表
直接书写在元素的style属性中
<h1 style="color:red;">
一级标题
</h1> - 外部样式表
将样式书写到独立的css文件中。<link rel="stylesheet" href="./css/index.css">
style表示的是样式表，href指的是css文件的路径地址。
使用link标签来引用外部css文件
1). 外部样式可以解决多页面样式重复的问题
2). 有利于浏览器得到缓存，从提高页面响应速度。
3). 有利于代码分离(HTML和CSS) ,更容易阅读和维护。
常见的样式声明
- color
元素内部的文字颜色
预设值:定义好的单词
三原*值**:光学三原色(红、绿、蓝),每个颜色可以使用0-255之间的数字来表达
rgb表示法： rgb(0,255,0)其中这三个值分别都代表红绿蓝的颜色深度，值越大，颜色越深。 hex(16进制) 表示法： # 00(红) 8c(绿) 8c(蓝) 前两位表示的是红色，中间的两位表示的是绿色，最后两位表示的是蓝色. 因为两位的16进制的数字刚好等于十进制255. 淘宝红：#ff4400(#f40) 黑色：#000000(#000) 白色：#ffffff(#fff) 红色：#ff0000 绿色：#00ff00 蓝色：#0000ff 紫色：#f0f 青色：#0ff 黄色：#ff0 灰色：#ccc
<head>
<title>Document</title>
<style>
.red{
color: red;
font-size: 2em;
}
</style>
</head>
<body>
<h1 class="red">
现在开始添加样式
</h1>
<p>Lorem ipsum dolor sit.</p>
<p class="red">Lorem ipsum dolor sit amet.</p>
<p>Lorem, ipsum dolor.</p>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</body>
</html> - background-color
元素背景颜色
- font-size
元素内部文字的尺寸大小
1) px:像素,绝对单位,简单的理解为文字的高度占多少个像素
2) em:相对单位,相对于父元素的字体大小,假如父元素为10px,那么子元素2em就是20px;每一个元素必须有字体大小,如果没有声明,则直接使用父元素的字体大小,如果没有父元素(html),则会使用基准字号.
user agent, UA , 用户***(浏览器)
- font-weight
文字粗细程度,可以取值数字,可以取值为预设值
默认值为noraml
strong、em元素,默认加粗
<strong>表示重要的、不能忽略的内容</strong> <em>表示强调的内容</em>
- font-family
文字类型
必须用户计算机中存在的字体才会有效。
使用多个字体,以匹配不同的环境
sans-serif,非衬线字体,在字体后面加入sans-serif是为了前面的字体都不识别不了的情况下，需要系统自动设置本计算机上的字体。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
font-family:consolas,翩翩体-简,微软雅黑,Arial,sans-serif
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet.
</div>
<h1>
这里是一个一级标题
</h1>
</body>
</html> - font-style
字体样式,通常用它设置斜体
i元素,em元素,默认样式,是倾斜字体,实际使用中,通常用它表示一个图标(icon)
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。
- text-decoration
文本修饰,给文本加线 、
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
inherit 规定应该从父元素继承 text-decoration 属性的值。
del元素：错误的内容
- text-indent
text-indent 属性规定文本块中首行文本的缩进。
注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。
length 定义固定的缩进。默认值：0。
% 定义基于父元素宽度的百分比的缩进。
inherit 规定应该从父元素继承 text-indent 属性的值。
- line-height
line-height 属性设置行间的距离（行高）。
注释：不允许使用负值。
设置行高为容器的高度,可以让单行文本垂直居中
<style>
p{
line-height:1.5;
}
</style> normal 默认。设置合理的行间距。
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
background:#008c8c;
color:#fff;
height:50px;
line-height:50px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet.
</p>
</body>
</html> - width
width 属性设置元素的宽度。
auto 默认值。浏览器可计算出实际的宽度。
length 使用 px、cm 等单位定义宽度。
% 定义基于包含块（父元素）宽度的百分比宽度。
inherit 规定应该从父元素继承 width 属性的值。
- height
<style>
p
{
height:100px;
width:100px;
}
</style> auto 默认。浏览器会计算出实际的高度。
length 使用 px、cm 等单位定义高度。
% 基于包含它的块级对象的百分比高度。
inherit 规定应该从父元素继承 height 属性的值。
- letter-space
letter-spacing 属性增加或减少字符间的空白（字符间距）。
该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。
注释：允许使用负值，这会让字母之间挤得更紧。
normal 默认。规定字符间没有额外的空间。
length 定义字符间的固定空间（允许使用负值）。
inherit 规定应该从父元素继承 letter-spacing 属性的值。
百威成长空间 50人发布
查看18道真题和解析