这里写目录标题
- 一级目录
- 二级目录
- 三级目录
- 基础选择器、字体文本属性
- 一、语法规范
- 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">
