有关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.快速生成html" title=css>css语法
- 二、复合选择器
- - 1.后代选择器
  - 2.子选择器
  - 3.并集选择器
  - 4.伪类选择器

一级目录

二级目录

三级目录

基础选择器、字体文本属性

一、语法规范

1.

html" title=css>css"><head><style>p<!--选择器-->{color属性: red值;}</style>
</head>

2.代码风格

每一行换行
属性用小写字母
选择器后一个空格，属性的冒号后一个空格

二、基础选择器

1.标签选择器

html" title=css>css"><head><style>p {color: red;}</style>
</head>

2.类选择器：样式点.定义，结构类class调用

html" title=css>css"><head><style>.red {color: red;}.box {width: 150px;height: 100px;}</style>
</head>
<body><ul><li class="red box">冰雨</li></ul>
</body>

3.id选择器：样式#定义，结构id调用，只能调用一次

html" title=css>css"><head><style>#pink {color: pink;}</style>
</head>
<body><div id="pink">冰雨</div>
</body>

4.通配符选择器：把body内的全改

html" title=css>css"><head><style>* {color: pink;}</style>
</head>
<body><div>冰雨</div><span>好的</span>
</body>

三、字体属性

1.字体系列

html" title=css>css"><head><style>body {font-family: 'Microsoft YaHei',arial,tahoma,'Hiragino Sans GB';}</style>
</head>

2.字体大小

标题要另外重新设置

html" title=css>css"><head><style>body {font-size: 16px;}h2 {font-size: 16px;}</style>
</head>

3.字体粗细

html" title=css>css"><head><style>.bold {font-weight: bold;或者font-weight: 700;细变粗，更提倡}h4 {font-weight: 400;粗变细或者font-weight: normal;}</style>
</head>

4.字体样式

html" title=css>css"><head><style>p {font-style: normal;倾斜改为不倾斜font-style: italic;不倾斜改为倾斜}</style>
</head>

5.字体复合属性

html" title=css>css"><head><style>div {font: font-style font-weight font-size font-family;font: italic 700 16px 'Microsoft yahei';<!--简略版-->不可以换顺序，前两个可以省略}</style>
</head>

四、文本属性

1.文本颜色

html" title=css>css"><head><style>div {color: red;color: #e600ff;最常用color: rgb(0, 255, 242)}</style>
</head>

2.对齐文本

html" title=css>css"><head><style>h2 {text-align: center;水平居中，还有left,right}</style>
</head>

3.装饰文本

html" title=css>css"><head><style>div {text-decoration: none;取消下划线text-decoration: underline;下划线}</style>
</head>

4.文本首行缩进

html" title=css>css"><head><style>p {text-indent: 2em;一个em是相对当前元素的一个文字大小}</style>
</head>

5.行间距

当让行间距等于盒子高度时，可以让文字垂直居中

html" title=css>css"><head><style>p {line-height: 26px;文本高度不变+上行距+下行距}</style>
</head>

五、引入方式

1.内部样式表

上述

2.行内样式表

注意双引号，使用较少，只能改变一个标签

html" title=css>css"><p style="color: pink; font-size: 12px">青春</p>

3.外部样式表

新建一个html" title=css>css文件，注意后缀为html" title=css>css,将所有html" title=css>css代码都放入此文件,不需要写style,只写样式就可以，div{color: pink;}
在html页面使用link引入文件，link+tab

html" title=css>css"><head>  <link rel="styleshleet" href="html" title=css>css文件路径">
</head>

六、Chrome调试工具

1.打开方式

F12或右键空白处，检查，elements

2.使用

放大：ctrtl+滚轮
左侧html右侧html" title=css>css

Emmet语法及复合选择器

一、Emmet语法

html_259">1.快速生成html语法

标签+tab

div*10快速生成10个div
ul>li快速生成父子关系标签
+快速生成兄弟关系标签

默认div
.nav快速生成

#win快速生成

span.nav快速生成
span#win快速生成
.nav$*5快速生成排好序的nav
{}可以生成标签内内容，div{学习使我快乐}*5

html" title=css>css_275">2.快速生成html" title=css>css语法

tac:text-align: center;
ti:text-indent: 2em;
w700:width: 700px
lh26px:line-height: 26px;

二、复合选择器

1.后代选择器

后续元素必须是元素一的后代，逐层查找，中间必须有空格，改变最后的元素代表的多个标签

html" title=css>css"><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.子选择器

只会选择亲儿子

html" title=css>css"><style>.nav>a{color: red;}
</style>
<ul class="nav"><li><a href="#">红色链接</a></li><li><p><a href="#">不变色</a></p></li>
</ul>

3.并集选择器

html" title=css>css"><style>div,p,.pig li{color: pink;}
</style>
<div></div>
<p></p>
<ul class="pig"><li></li>
</ul>

4.伪类选择器

按照LVHA的顺序书写

html" title=css>css"><style>a:link选择未被选择的链接{color: pink;text-decoration: none;}a:visited选择被选择的链接{color: black;}a:hover选择鼠标经过的链接{color: red;}a:active选择鼠标按下但未弹出的链接{color: green;}
</style>
<a href="#">小猪佩奇</a>

一般写法：

html" title=css>css"><style>a {color: pink;text-decoration: none;}a:hover选择鼠标经过的链接{color: red;}
</style>
<a href="#">小猪佩奇</a>

:focus伪类选择器：
用于选取获得焦点的表单元素，只改变取得焦点的临时状态

html" title=css>css"><style>input:focus {back-ground-color: pink;color: red;}
</style>
<input type="text">
<input type="text">
<input type="text">