本文主要是介绍有关css基础的基础选择器、字体文本属性、Emmet语法及复合选择器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
这里写目录标题
- 一级目录
- 二级目录
- 三级目录
- 基础选择器、字体文本属性
- 一、语法规范
- 1.
- 2.代码风格
- 二、基础选择器
- 1.标签选择器
- 2.类选择器：样式点.定义，结构类class调用
- 3.id选择器：样式#定义，结构id调用，只能调用一次
- 4.通配符选择器：把body内的全改
- 三、字体属性
- 1.字体系列
- 2.字体大小
- 3.字体粗细
- 4.字体样式
- 5.字体复合属性
- 四、文本属性
- 1.文本颜色
- 2.对齐文本
- 3.装饰文本
- 4.文本首行缩进
- 5.行间距
- 五、引入方式
- 1.内部样式表
- 2.行内样式表
- 3.外部样式表
- 六、Chrome调试工具
- 1.打开方式
- 2.使用
- Emmet语法及复合选择器
- 一、Emmet语法
- 1.快速生成html语法
- 2.快速生成css语法
- 二、复合选择器
- 1.后代选择器
- 2.子选择器
- 3.并集选择器
- 4.伪类选择器
一级目录
二级目录
三级目录
基础选择器、字体文本属性
一、语法规范
1.
<head><style>p<!--选择器-->{color属性: red值;}</style>
</head>
2.代码风格
每一行换行
属性用小写字母
选择器后一个空格，属性的冒号后一个空格
二、基础选择器
1.标签选择器
<head><style>p {color: red;}</style>
</head>
2.类选择器：样式点.定义，结构类class调用
<head><style>.red {color: red;}.box {width: 150px;height: 100px;}</style>
</head>
<body><ul><li class="red box">冰雨</li></ul>
</body>
3.id选择器：样式#定义，结构id调用，只能调用一次
<head><style>#pink {color: pink;}</style>
</head>
<body><div id="pink">冰雨</div>
</body>
4.通配符选择器：把body内的全改
<head><style>* {color: pink;}</style>
</head>
<body><div>冰雨</div><span>好的</span>
</body>
三、字体属性
1.字体系列
<head><style>body {font-family: 'Microsoft YaHei',arial,tahoma,'Hiragino Sans GB';}</style>
</head>
2.字体大小
标题要另外重新设置
<head><style>body {font-size: 16px;}h2 {font-size: 16px;}</style>
</head>
3.字体粗细
<head><style>.bold {font-weight: bold;或者font-weight: 700;细变粗，更提倡}h4 {font-weight: 400;粗变细或者font-weight: normal;}</style>
</head>4.字体样式
<head><style>p {font-style: normal;倾斜改为不倾斜font-style: italic;不倾斜改为倾斜}</style>
</head>
5.字体复合属性
<head><style>div {font: font-style font-weight font-size font-family;font: italic 700 16px 'Microsoft yahei';<!--简略版-->不可以换顺序，前两个可以省略}</style>
</head>
四、文本属性
1.文本颜色
<head><style>div {color: red;color: #e600ff;最常用color: rgb(0, 255, 242)}</style>
</head>
2.对齐文本
<head><style>h2 {text-align: center;水平居中，还有left,right}</style>
</head>
3.装饰文本
<head><style>div {text-decoration: none;取消下划线text-decoration: underline;下划线}</style>
</head>
4.文本首行缩进
<head><style>p {text-indent: 2em;一个em是相对当前元素的一个文字大小}</style>
</head>
5.行间距
当让行间距等于盒子高度时，可以让文字垂直居中
<head><style>p {line-height: 26px;文本高度不变+上行距+下行距}</style>
</head>
五、引入方式
1.内部样式表
上述
2.行内样式表
注意双引号，使用较少，只能改变一个标签
<p style="color: pink; font-size: 12px">青春</p>
3.外部样式表
新建一个css文件，注意后缀为css,将所有css代码都放入此文件,不需要写style,只写样式就可以，div{color: pink;}
在html页面使用link引入文件，link+tab
<head> <link rel="styleshleet" href="css文件路径">
</head>
六、Chrome调试工具
1.打开方式
F12或右键空白处，检查，elements
2.使用
放大：ctrtl+滚轮
左侧html右侧css
Emmet语法及复合选择器
一、Emmet语法
1.快速生成html语法
标签+tab
div*10快速生成10个div
ul>li快速生成父子关系标签
+快速生成兄弟关系标签
默认div
.nav快速生成
#win快速生成
span.nav快速生成
2.快速生成css语法
tac:text-align: center;
ti:text-indent: 2em;
w700:width: 700px
lh26px:line-height: 26px;
二、复合选择器
1.后代选择器
后续元素必须是元素一的后代，逐层查找，中间必须有空格，改变最后的元素代表的多个标签
<style>元素一ul 元素二li {color: pink;}元素一ul 元素二li 元素三a{color: red;}.nav (li) a{color: yellow;}
</style>
<ul><li>粉字</li><li><a href="#">红色链接</a></li><li><p><a href="#">也是红色链接</a></p></li>
</ul>
<ul class="nav"><li><a href="#">黄色链接</a></li>
</ul>
2.子选择器
只会选择亲儿子
<style>.nav>a{color: red;}
</style>
<ul class="nav"><li><a href="#">红色链接</a></li><li><p><a href="#">不变色</a></p></li>
</ul>
3.并集选择器
<style>div,p,.pig li{color: pink;}
</style>
<div></div>
<p></p>
<ul class="pig"><li></li>
</ul>
4.伪类选择器
按照LVHA的顺序书写
<style>a:link选择未被选择的链接{color: pink;text-decoration: none;}a:visited选择被选择的链接{color: black;}a:hover选择鼠标经过的链接{color: red;}a:active选择鼠标按下但未弹出的链接{color: green;}
</style>
<a href="#">小猪佩奇</a>
一般写法：
<style>a {color: pink;text-decoration: none;}a:hover选择鼠标经过的链接{color: red;}
</style>
<a href="#">小猪佩奇</a>
:focus伪类选择器：
用于选取获得焦点的表单元素，只改变取得焦点的临时状态
<style>input:focus {back-ground-color: pink;color: red;}
</style>
<input type="text">
<input type="text">
<input type="text">
这篇关于有关css基础的基础选择器、字体文本属性、Emmet语法及复合选择器的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
