幽会css

目录

•  css介绍
• css引入方式
• css常用选择器
• 选择器的权重优先级
• css长度单位
• css的颜色
• 字体文本样式
• 如何去除行内空格
• 文本对齐方式
• 属性选择器
• 伪类元素选择器

css介绍 

• 作用：更加专注于页面的样式表现
• 语法：选择器{样式名：样式值；} 
• 注释：/*注释内容*/

css引入方式 

1.行内引入

<p style="color:red"></p>

2.内嵌

<style type="text/css">

                选择器{样式名：样式值；}
</style>

3.外联

<link rel="stylesheet" type="text/css" href="xx.css">

 css常用选择器

*	统配选择器
tag	标签选择器
class	类选择器
id	id选择器
，	群组选择器
空格	后代选择器
>	直接子集
+	下一个相邻兄弟

选择器的权重优先级

从大到小排序：！important（10000）>行内（1000）>id（100）>class（10）>tag（1）>*（0）
多个并联选择器，使用权重值求和计算

css长度单位 

px	绝对像素
%	相对于父节点的百分比
vh/vw	相对于可视化窗口的百分比大小
em	相对于父节点的字体大小
ren	相对于根节点的字体大小
cm,mm,pt	适合打印的单位

css颜色

• 十六进制：#000000；
• rgb/rgba(255,255,255,1)
• 引文单词：red
• 字体颜色、背景色、边框色

 字体文本样式

• 字体大小：font-size:30px
• 字体粗细：font-weight:900(100-900)
• 字体倾斜：font-style:italic（normal正常，italic倾斜）
• 字体类型：font-family:"字体"
• 字体对齐：text-align:left（center居中对齐   right右侧对齐  left左侧对齐）
• 文本装饰线：text-decoration：overline上划线    line-through删除线    underline下划线
• 文本首行缩进：text-indent：2rem
• 行高：line-height：50px
• 英文大小写变化：text-transform：uppercase       lowercase       capitalize
• 空白处理：white-space：normal默认     nowrap不换行   pre格式化文本
• 溢出选项：overflow：hidden隐藏      scroll水平垂直滚动条   auto根据内容自动
• 文本溢出：text-overflow：normal默认    ellipsis文本溢出显示为...
• 单词间距：word-spacing：10px
• 字符间距：letter-spacing：10px

如何去除行内空格 

父节点;添加font-size：0；
子元素添加font-size：10px

文本对齐方式 

textalign：left	左对齐
text-align：center	水平居中
text-align：right	右对齐
text-align：justify	两端对齐，非最后一行两端对齐
text-align-last：left	左对齐
text-align-last：center	水平居中
text-align-last：right	右对齐
text-align-last：justify	两端对齐
vertical-align：top	顶
vertical-align：middle	中
vertical-align：bottom	低
vertical-align：baseline	基线默认

属性选择器

[属性名]	按属性名查找
[属性名=属性值]	按属性名和属性值匹配查找
[属性名^=属性值]	按属性名和属性值开头匹配查找
属性名$=属性值	按属性名和属性值结尾匹配查找
属性名*=属性值	按属性名和包含属性值匹配查找
属性名-=属性值	按属性名和统配包含属性值（多属性值）匹配查找

 伪类元素选择器

：link	未连接
：visited	已访问
：hover	鼠标经过
：active	鼠标按下未松开
：focus	表单元素获得焦点
：enabled	获得表单元素
：disabled	失活表单元素
：checked	勾选表单元素