本文详细解读CSS，从行内样式、内部样式、外联样式开始，深入解析font-size、font-family、font-weight和font-style等属性，以及选择器和外观属性如color、line-height和text-align的使用。了解标签选择器、类名和ID选择器，以及伪类选择器的应用。
CSS：层叠样式表
专门用来控制界面外观风格的文档
CSS注释：/* */
HTML注释：<!-- -->
使用方式
行内样式
1.行内样式—写在标签里
格式：
<div style="color:red; fond-size:20px;">行内样式</div>
行内样式需要写到标签的style属性值中。
内部样式
2.内部样式—只在本页面内生效
格式：
<head>
<style>
div{
}
</style>
</head>
内部样式需要写到
外联样式
3.外联样式—单独的css文件
格式：
<link rel="stylesheet" href="css/css文件名">
字体样式属性
font-size
1.font-size：字体大小
浏览器默认大小为：16px
浏览识别的最小字体：12px
注：
px固定大小的单元,用于屏幕媒体
em相对字体长度单位，跟随父元素的字体大小变化，不固定
rem相对于根元素的字体大小的单位
font-family
2.font-famile：字体
浏览器默认字体为微软雅黑
可以同时指定多个字体，中间以逗号隔开
英文字体放前面
结：
尽量使用偶数的数字字号
各种字体之间必须使用英文状态下的逗号隔开
字体名中包括空格、#、￥等符号，用双引号包着
尽量使用默认字体
font-weight
3.font-weight：字体粗细
属性值：
normal（正常）
bold（加粗）
bolder（更粗）
lighter（更细）
整百数（100-300细、400-600正常、700-900粗）
font-style
4.font-style：字体风格
属性值：
italic（斜体）
normal（正常）
oblique（倾斜）
注：
当用italic浏览器不显示时，就用oblique强制
字体的简写形式
font：font-style font-weight font-size font-family
font-size和font-family必须保留，否则font属性将不起作用
基本选择器
标签选择器
1.标签选择器：选中所有div标签
div{
}
使用：直接生效
类名选择器
2.类名选择器：选中需要的，可选多个
.box{
}
使用：class=”box“
id选择器
3.id选择器：同样名字的id只能有一个
#one{
}
使用：id=“one”
通配符选择器
4.通配符选择器：对所有的标签全部渲染
*{
}
使用：直接生效
谨慎使用，影响效率
伪类选择器
:link：未访问的链接
:visited：已访问的链接
:hover：鼠标移动到链接上
:active：选定的链接
注：
:link只对拥有实际链接地址的a对象发生效果
:hover可以适用多种标签
CSS外观属性
color
color：文本颜色
属性值：
预定义的颜色名
red
green
blue
十六进制的颜色值：0-9 A-F(a-f)
红：#f00
绿：#0f0
蓝：#00f
白：#fff
黑：#000
RGB颜色值：0-255
红：rgb(255,0,0);
颜色半透明rgba：0-1（完全透明-不透明）
rgba(255,0,0,0.5);
line-height
2.行间距/行高：line-height
文字的基线与基线之间的距离
以字母小x为例：
它的下沿端是基线
它的中心线就是中线
一行文字的顶就是顶线
一行文字的底就是底线
注：
一般行高设置就是比字号大7-8个像素就可以了
text-align
3.水平对齐方式
text-align：
属性：
left：默认左对齐
right：右对齐
center：居中
justify：两端对齐
单行文本水平垂直居中
text-align:center;
line-height:**px；
把行高和盒子的高度保持一致
首行缩进
text-indent：2em;
文本修饰
text-decoration
属性值：
underline：下划线
overline：上划线
line-through：删除线
none：去掉文本修饰
大小写转换
text-transform
属性值：
capitalize：首字母大写
uppercase：大写字母
lowercase：小写字母
none：无转换
字符间距
letter-spacing
汉字和字母之间的间距
支持负值
单词间距
word-spacing
单词之间的距离
文字阴影
text-shadow
属性值：
v-shadow：水平距离（正右）
h-shadow：垂直距离（正下）
blur：模糊距离
color：阴影颜色
text-shadow：水平距离 垂直距离 模糊距离 阴影的颜色；
注：
多重颜色：
text-shadow:-5px 0 0 cyan,5px 0 0 rgb();
用逗号隔开，cyan（蓝绿色/草绿色）
模糊距离：
没有可以不写
前两个必须写，后两个可选
扫一扫
1544
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
