为网页添加样式
术语解释
h1{
color: aqua;
background-color: cadetblue;
text-align: center;
}
整个代码叫做CSS规则
CSS规则=选择器(大括号前面的)+声明块
选择器
选择器：选中元素，确定样式的范围
1.ID选择器：选中的是对应ID值的元素(选择范围太窄)
2.元素选择器（只要是这个元素，不管在页面的什么位置都会被选中）（选择范围太广）
3.类选择器（常用）
声明块
出现在大括号中
声明块中包含了很多声明（属性），每一个声明表达了某一方面的样式。
CSS代码书写位置
1.内部样式表
代码书写在style元素中（最好写在head中，使浏览器最先读取到样式）
当样式比较少的时候可以用，可以少读一个CSS文件，浏览器读页面时，可以少读一个文件，提高加载速度。
2.内联样式表，元素样式表
直接写到元素的style属性里面，不需要写选择器
3.外部样式表（用的最多）
将样式书写到独立的CSS文件中
<link rel="stylesheet" href="./index.css">
需要用到这个元素链接样式表
1)外部样式表可以解决多页面样式重复的问题
2）有利于浏览器缓存从而提高页面相应速度，当页面第一次读到外部的CSS文件会将这个文件缓存起来，下一次再次遇到时不用重新读一次，直接用上次缓存的数据。
3）有利于代码分离（HTML和CSS代码），更容易阅读和维护。
常见样式声明
- color
元素内部颜色
可以直接在Google页面上点击右键属性，选中要测试的地方，在右边直接书写代码进行测试，但是这个只用于测试，刷新后样式会回到之前。
预设值：定义好的单词
三原色 色值光学三原色（红绿蓝）通过这三种颜色来组合成其他颜色，每个颜色可以使用0-255之间的数字来表达，叫做色值。
rgb表示法
rgb(0,255,0)（这个颜色表示绿色）（中间是三个数字）
hex表示法（16进制）
color：#红绿蓝(一个颜色两个数字（十六进制的数字，所以可能有字母）)
比如 color: #008c8c;
black ：#000000 #000(当三个颜色对应的数字或字母相同时可以简写：每个写一个)
white：#ffffff #fff
red: #ff0000 #f00
green: #00ff00 #0f0
blue: #0000ff #00f
purple：#f0f
青色：#0ff
yellow： #ff0
grey：#ccc
- background-color
元素背景颜色
- font-size
元素内部文字大小
1）px：像素，绝对单位。
2）em ：相对单位，相对于父元素的字体大小的倍数，比如父元素大小为10px,子元素大小为2em，那就是父元素的两倍像素大小即20px。
每个元素必须有字体大小，如果没有申请则直接使用父元素的字体大小，如果没有父元素的字体大小，就使用基准字号（浏览器里设置的字体大小）
- font-weight
文字粗细程度，可以取数字，可以取预设值,也可以设置为单词bold(700)，（默认值是normal 400）
strong元素 默认加粗:表示重要的不能忽略的内容
- font-family
文字类型：必须是用户计算机内存在的字体才会有效。
使用多个字体以匹配不同环境
ziti{
font-family: Arial, Helvetica, sans-serif;设置多个字体
}
sans-serif：非衬线字体，边缘没有经过修饰，在最后加上，防止前面的字体都无效，让电脑选择一个非衬线字体
- font-style
字体样式：通常用来设置斜体italic
i元素 默认样式是倾斜字体；实际使用的时候，通常用它来表示一个图标icon
em元素 默认斜体 表示强调的内容
- text-decoration
文本修饰：给文字加线
a元素就是浏览器默认样式中加了一个 text-decoration：underline
del元素：错误的内容 默认加了一个text-decoration：line-through
s元素：过期的内容（比如淘宝上过期的活动）
- line-height
行高：每行文本的高度 可以用px
多行文字最好使用相对单位（可以用em 最好用直接写纯数字，表示相对于当前文字的字体大小）
设置行高为容器的高度，可以让单行文本垂直居中
- width
宽度
- height
高度
- letter-space
文字间隙 （可以用em px）
- text-align
元素内部文字的排列方式(靠左，靠右，居中……)
- text-indent
首行文本缩进 ：可以写px ,可以写em，2em 就是缩进两个字符（中文）
扫一扫
819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
