网页文字的颜色、粗体、背景、行间距和左右两列的排版等，都是通过CSS控制的
颜色属性: color：属性值;（注意分号）
背景属性：background:属性值；
浮动属性：float:属性值；
字体属性：font:属性值；
CSS非常灵活，既可以嵌入在HTML文档中，也可以是一个单独的外部文件，如果是独立的文件，则必须以.css为后缀名
列如：
注意：运用CSS3私有属性时，要遵从一定的书写顺序，即先写私有的CSS3属性，再写标准的CSS3属性。 当一个CSS3属性成为标准属性，并且被主流浏览器的最新版普遍兼容的时候，就可以省略私有的CSS3属性。
CSS样式规则：选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
在上面的样式规则中，选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。其中，属性和属性值以“键值对”的形式出现，用英文“:”连接，多个“键值对”之间用英文“;”进行区分
CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式
多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是为了便于增加新样式最好保留
如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号
在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释。
在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无
引入CSS样式表
行内式也称为内联样式，是通过标记的style属性来设置元素的样式
语法格式：<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标记名>
内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中，并且用<style>标记定义
语法格式：<head> <style type="text/css"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} </style> </head>
链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标记将外部样式表文件链接到HTML文档中
语法格式：<head> <link href="CSS文件的路径" type="text/css" rel="stylesheet" /> </head>
优先级：行内式>内嵌式>链入式；但是内嵌式>链入式有一个前提：内嵌式css样式的位置一定在链入式的后面
就近原则：离被设元素越近，优先级越高
上述优先级有一个前提：其是在同一个权值的情况下
导入外部样式表:在内部样式表的<style></style>标记之间导入一个外部样式表用@import
在<head><style type="text/css"> @import "jisuan.css"; </style></head>
外部讲解：https://www.w3cschool.cn/css/css-quote.html
选择器
标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式
语法格式：标记名（p,h1之类的）{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
类选择器使用“.”（英文点号）进行标识，后面紧跟类名
语法格式：.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
语法格式：#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素
语法格式：*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3.special或p#one
后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代，（一个标记里包含了另外的标签）
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。若某些选择器定义的样式完全或部分相同，可利用并集选择器为它们定义相同的样式，（求同去异）（特点关系：既…又…）
详情：https://blog.csdn.net/BaiHuaXiu123/article/details/51327025?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159936202019195188330363%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=159936202019195188330363&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v3~rank_business_v1-3-51327025.ecpm_v3_rank_business_v1&utm_term=HTML5%E4%B8%AD%E9%80%89%E6%8B%A9%E5%99%A8&spm=1018.2118.3001.4187
注意：
id属性，每一个标签都有一个id,而且在同一个HTML文档中id不能重复。class属性，这里的class类似于面向对象的继承。如class = 'a,b,c'字体的属性 （不写 默认显示）
color属性用于指定文本的颜色，其取值方式有如下三种
预定义的颜色值，如red，green，blue等。 十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。 RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)
letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白
其属性值可为不同单位的数值，允许使用负值，默认为normal
word-spacing属性用于定义英文单词之间的间距，对中文字符无效
用于定义英文单词之间的间距，和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal
line-height属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高
常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px
text-transform属性用于控制英文字符的大小写
其可用属性值如下： none：不转换（默认值）
capitalize：首字母大写
uppercase：全部字符转换为大写
lowercase：全部字符转换为小写。
text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果
其可用属性值如下： none：没有装饰（正常文本默认值）
underline：下划线
overline：上划线
line-through：删除线
text-align属性用于设置文本内容水平对齐，相当于html中的align对齐属性
其可用属性值如下： left：左对齐（默认值） right：右对齐 center：居中对齐。
text-indent属性用于设置首行文本的缩进
其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位
white-space属性可设置空白符的处理方式
其属性值如下： normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行
pre：预格式化，按文档的书写格式保留空格、空行原样显示
nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记<br />
内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。
颜色值的缩写：十六进制颜色值是由#开头的6位十六进制数值组成，每2位为一个颜色分量，分别表示颜色的红、绿、蓝3个分量。当3个分量的2位十六进制数都各自相同时，可使用CSS缩写。
文本外观属性
text-shadow属性可以为页面中的文本添加阴影效果
选择器{ text-shadow:h-shadow v-shadow blur color;}
text-overflow属性用于标示对象内溢出的文本
选择器{text-overflow:属性值;}
text-overflow属性的常用取值有两个： clip：修剪溢出文本，不显示省略标记“…” ellipsis：用省略标记“…”标示被修剪文本，省略标记插入的位置是最后一个字符
层叠性：所谓层叠性是指多种CSS样式的叠加
继承性：所谓继承性是指书写CSS样式表时，子标记会继承父标记的某些样式，如文本颜色和字号
优先级：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题
特殊情况：继承样式的权重为0。 行内样式优先。
权重相同时，CSS遵循就近原则
CSS定义了一个!important命令，该命令被赋予最大的优先级。
复合选择器的权重为组成它的基础选择器权重的叠加，但是这种叠加并不是简单的数字之和
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css33.css" type="text/css" /> <!-- 外部样式表css33.css中的代码如下#one{ color: yellow !important ; } --> <style type="text/css"> #one{ color:red; } </style> </head> <body> <p id="one" style="color:green;">!importan的命令最优先</p> </body> </html>实现效果：
综合案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>练习题3</title> <style type="text/css"> body{ color: blue; } .shadow3{ font-size: 3.125rem; color: #0000FF; text-shadow:15px 15px 1px #FF0000; } </style> </head> <body> <h2 align="center" class="shadow3">活动通知</h2> <h4 font-family="黑体" align="center">——————第一期员工活动主题<font></h4> <hr > <p >各位公司同任：<br><p style="text-indent: 2em;">首期员工活动开在春暖花开，阳光明媚的五月份举行，特邀请大家 <mark >踏青活动时间为5月12号</mark></p></p> <img src="tupian\111.png" align="left" hspace="10" vspace="10" width="500px" > <strong>1.安排如下</strong><br> <mark>13:00</mark>在公司门口集合<br> <mark>13:30</mark>去<br> <mark >16:30</mark>活动结束<br> <strong>2.活动须知:</strong> 各位同事提前安排好工作，如因工作原因不能参加本次活动的人员请通知行政人事部 公司准备水等必需品 上衣穿着公司统一购买的 <br> <p align="right" > <strong>行政文化中心 <br> 2019年4月22日</strong> </p> </body> </html>实现效果：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .shadow2{ font-size:4.25rem; font-style: 微软雅黑; color: aqua ; text-shadow:15px 15px 1px #FF0000; } .oflow1{ width: 1000px; height: 400px; border:1px solid black ; } .color2{ color: blue; } p{ word-wrap: break-word; height="200px" } w1{ color: #000000; } p2{ color: #0000FF; } .ziti{ font-family: 黑体; height="20px" } </style> </head> <body> <div class="oflow1"> <h1 class="shadow2" align="center" font:50px >重要消息</h1> <h2 class="color2" align="center" underline><u size="12">关于举办2015年全国高校IT骨干教师暑假培训班的通知</u></h2> <p class="color2" align="center">2015年4月15日11点11分传智博客网<w1>我有话说(<font color="#FF0000">802</font>人)参与</w1></p> <hr > <p style="text-indent: 2em;" class="ziti">2015年全国高校</p > <p style="text-indent: 2em;" ><font color="#FF0000">传智播客网4月15日消息</font>本次课程，由中国电子学会携手<p2>[微博]</p2>主办，由传智博客<p2>[微博]</p2> 承办的全国骨干教师(软件开发)改为全国骨干教师(软件开发)全国骨干教师(软件开发) 全国骨干教师(软件开发)全国骨干教师(软件开发)程涵盖：<font color="#FF0000"><strong>JavaEE,.NET,PHP,C++</font></strong>等六个方向</p> </div> </body> </html>实现效果：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="aaaaaa" content="网页描述"/> <title></title> <style type="text/css"> /* 标记选择器 */ p{ color:red; } span{ color: aqua; } /*类选择器*/ .class1{ color:red; font-style: italic; word-spacing: 1.25rem; line-height:12.5rem ; } /*id选择器*/ #id1{ letter-spacing: 1.25rem; line-height: unset; color:red; } /* 后代标记选择器 */ p span{ color: darkblue; } /*标记指定式选择器*/ p.one{ font-size: smaller; color: darkorange; } .shadow1{ font-size:6.25rem; text-shadow:10px 10px 10px #FF0000; } /*溢出 宽度 高度 white-space:nowrap不换行 溢出时隐藏 text-overflow: ellipsis隐藏的变成省略号*/ .oflow1{ width: 1.25rem; height: 3.125rem; white-space: nowrap; border: 0.0625rem solid #FF0000 ; overflow: hidden; text-overflow: ellipsis; } <!--border 像素 形状 颜色--> </style><!--内嵌式--> <style type="C:\Users\asus\Desktop/text.css"> @import url("background-color: red");; </style><!--导入式--> </head> <body> <p >你好，我是P标签</p> <p>嵌套<span>span</span>标记的方法</p> 嵌套之外<span>标记</span>不生效 <p class="one">我是标签标记选择器</p> <p style="color:red">行内式写法</p><!--行内式--> <h1 class="class1">class选择器类写法</h1> <p id="id1">id选择器调用写法</p> <p class="shadow1" >阴影显示效果</p> <p class="oflow1">这是oflow案例展示,如果溢出就显示。。。。。</p> </body> </html>
