标签：避免 内容 nbsp name 内嵌 red 多个 状态 sheet
CSS(Cascading Style Sheets)
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
简单来说一句话，就是用来给HTML标签设置外观样式的，让我们的HTML页面更加的丰富多彩.
<div style="color:red;font-size:130px;">今天开始学习CSS样式结构</div>
内嵌式 在同一个页面的head标签的一对style标签内写样式 页面结构比较简单
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>内嵌样式的写法</title> <style type="text/css"> div { color:cyan; font-size: 80px; } /* 内嵌样式的写法，是写在同一个页面中的head标签的style标签内 */ </style> </head> <body> <div>但行好事，莫问前程</div> </body>
外链式 就是将样式写在一个单独的css文件当中，然后使用link标签引入到对应的html文件当中, 当做大项目的时候，提倡结构和样式完分离。
在页面中单击右键--->检查--->可以看到对应的标签，在右侧可以看到对应的样式，可以通过控制台来检查对应的样式和排错.
要想给页面中的标签设置对应的样式，首先得先找到对应的标签，
在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。
直白的说，选择器就是用来获取标签的一种方式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>标签选择器</title> <style> div { font-size: 60px; color: blue; color: red; /* 当一个属性被设置了多次的时候，默认以最后一次为主 */ } </style> </head> <body> <div>但行好事，莫问前程</div> <p>中华人民共和国</p> <div>愿岁月静好,愿现世安稳</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>标签选择器</title> <style> div { font-size: 60px; /* color:blue; color: red; */ /* 当一个属性被设置了多次的时候，默认以最后一次为主 */ } .box { color: blue; } .demo { color: red; } </style> </head> <body> <div class="box">但行好事，莫问前程</div> <p>中华人民共和国</p> <div class="demo">愿岁月静好,愿现世安稳</div> </body> </html>
类选择器的命名规范：
1.如果类名比较长或是有多个词的话，可以使用中划线
2.避免使用下划线，下划线留给js中的变量或是id名使用
多类名选择器
就是将多个类的样式同时作用于同一个标签上
id选择器
用法和类选择器是一样的，区别：
类选择器就相当于是人的名字，在一个页面中，可以有多个重复的
id选择器就相当于人的身份证号码，一个页面中不能出现相同的两个ID名
id多用于js当中来使用
*通配符选择器
*指的是通配符选择器，会将页面中所有的标签元素都选择中，效率比较低，用的不多。
在写一个页面的小案例的时候，或许会用到，常常是用来清除掉当前页面的所有的标签的默认内外间距。
1.font-size字体大小
font-size px em
2.font-family 字体样式
font-family:"宋体,仿宋,楷体,小篆,微软雅黑"
微软雅黑或"microsoft yahei"用的是最多的
3.font-weight 字体粗细
给文字内容设置粗细，代替b或strong
4.font-style 字体风格 正常还是倾斜
给文字设置字体风格，用来代替i或em
font字体是一个复合属性，是由font-style,font-weight,font-size,font-family组成的。
如果简写的话，有两个是必须的，font-size,font-family是必须要写的。
可以用于页面中设置一些特殊的效果
:link 未访问过的默认状态 只对a标签起作用
:visited 已经访问过的状态 只对a标签起作用
:hover 鼠标悬停在上面时的效果 对任何标签都起作用
:active 选定时的状态 对任何标签起作用
css样式 是用来给页面中的标签设置样式的，让页面更加的丰富多彩
书写的位置： 行内 内嵌 外链
学会使用chrome浏览器的控制台进行查看html骨架或css样式
基本选择器
标签选择器
类选择器
多类名选择器
id选择器
通配符选择器
链接伪类选择器
:hover link visited active
字体样式设置
font-style 字体风格 正常还是倾斜 可以代替 i em
标签：避免 内容 nbsp name 内嵌 red 多个 状态 sheet
原文地址：https://www.cnblogs.com/sauronblog/p/11441346.html
