CSS选择和文本样式

CSS只层叠样式表
CSS样式是表现，改变网页的呈现效果。
CSS内部样式（使用<style></style>标签在文档<head></head>里面定义内部样式表）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*CSS样式填充*/
</style>
</head>
<body>
</body>
</html>
CSS外部样式（外部样式用link调用）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
*（链接样式的名称）{
效果代码
}
CSS样式表有两个主要部分构成：要添加样式的盒子名或者标签名，以及要添加的样式。
盒子名或者标签名{
属性：值；
}
CSS表示颜色的方式：
  1. 用颜色名表示
  2. 用十六进制颜色值表示
  3. 用RGB函数表示
  4. 用HSL函数表示（Hue,Saturation,Lightness，色调、饱和度、亮度）
  5. 用RGBA函数表示（A表示的是改颜色的透明度，取值范围是0~1，0代表完全透明）
  6. 用HSLA函数表示
  7. 内联样式表（内联>内部>外部）：<p style="color:red;"></p>
  8. 权值不同时，浏览器是根据权值来判断使用哪种CSS样式的，哪种样式权值高就使用哪种样式
层叠优先级：
  1. 内联样式>内部样式表ID派生选择器>内部样式表ID选择器>内部样式表类派生选择器>内部样式表类选择器>内部样式表>外部样式表ID派生选择器>外部样式表ID选择器>外部样式表类派生选择器>外部样式表类选择器>外部样式表>浏览器缺省
  2. 如果同一个元素在没有其他样式的作用影响下，其Class定义了多个并以空格分开，其优先级顺序为：一个元素同时应用多个Class，后定义的优先（即近者优先），加上!important者最优先
CSS选择器：
  1. Class类选择器可以重复利用（选择Class命名的元素以.开头 .first{color:#00f;}）
  2. ID选择器唯一（选择ID命名的元素以#开头#p1{color:#0f0;}）
  3. 标签选择器：页面中所有的标签都是一个选择器p{color:red;}
群组选择器：
选择多个元素,以逗号隔开 #main,.first,span,a,h1{color:red;}
包含选择器：
选择某元素的后代元素，也称后代选择器，父类与子类间以空格隔开
p span{color:red;}
属性选择器：
  1. 选择包含某一属性的元素
  2. a[title]{color:red;} 选择包含title的a标签
  3. a[title][href]{color:red;} 选择包含title和href的a标签
  4. <a>伪类选择器
  5. a:link {color:#FF0000;}（未访问的链接，只用于a标签）
  6. a:visited {color:#00FF00;}（已访问的链接，只用于a标签）
  7. a:hover {color:#FF00FF;}（ 鼠标移动到链接上，可和其他标签结合一起用）
  8. a:active {color:#0000FF;}（选定的链接）
  9. 输入伪类选择器（针对表单）
  10. input:focus{color:red;}（ 键盘输入焦点 ）
  11. 其他伪类选择器
  12. p:first-child{color:red;} （第一个p）
  13. :before （在元素之前添加内容）
  14. :after （在元素之后添加内容）
  15. css文字文本属性：
  16. font-style:normal/ italic （设置文本为斜体）
  17. font-weight:normal(100-500)/ bold(600-900) （设置文本为粗体）
  18. font-family: “文本字体1”,”文本字体2”; （文本类型）
  19. text-align:left/center/right （文本水平对齐方式）
  20. vertical-align:top/middle/bottom（垂直对齐方式）
  21. line-height:数字px;（设置文本在一行内的高度）
  22. color：（定义文本颜色）
  23. letter—spacing：（定义字符间隔）
设置文本简写方式：
  1. text-decoration 文本修饰
  2. none:没有修饰
  3. underline:添加下划线
  4. overline:添加上划线
  5. line-through:添加删除线
  6. text-indent 首行缩进
文本大小写：
  1. text-transform:
  2. uppercase 单词都大写
  3. lowercase 单字都小写
  4. capitalize 每个单词首字母大写
  5. 单位 描述
  6. % 百分比
  7. in 英寸
  8. cm 厘米
  9. mm 毫米
  10. em 1em=当前的字体尺寸，2em=当前字体尺寸的两倍（在CSS中，em可以自动适应用户所使用的字体）
  11. ex 一个ex是一个字体的x-height（x-height通常是字体尺寸的一半）
  12. pt 1pt=1/72英寸（是一个标准的长度单位）
  13. pc 1pc=12点（12点活字）
  14. px 像素
posted @ 2020-09-06 09:59  陈冲冲  阅读(36)  评论(0)    收藏  举报