开始正式学CSS啦

CSS 层叠样式表

基础选择器

选择器{样式}

p{color:red;}
代码规范
空格
h1 {
    color: pink;
}
  1. 属性选择器前面，冒号后面，保留一个空格
  2. 选择器和大括号中间保留空格
标签选择器
<style>
 标签名{
     属性:属性值;
 }
</style>
类选择器

结构需要使用class属性来调用class类

类选择器：

​ 样式点定义，结构class调用，一个或多个

多类名

使用方式

class="red font"多类名添加空格即可

id选择器
#hso {
    color: red;
}
<div id="hso">
    
</div>

id具有唯一性

通配符选择器

通配符选择器使用“ * ”定义，表示选取页面的所有元素】

* {
    color:red;
}
  • 不需要调用，自动使用样式
  • 特殊情况才使用，比如边距

字体属性

字体系列

font-family:"Microsoft Yahei","Consolas";

选择多个字体，兼容性高

字体大小

font-size:20px;

标题文字比较特殊，需要单独指定文字大小

字体粗细

font-weight:normal|bold;

700相当于bold；400相当于normal；

文字样式

font-style:normal|italic;

一般不使用italic，反而将em属性倾斜的回正

字体复合属性

font: font-style font-weight font-size/line=height font-family

严格按照顺序，必选保留font-size font-family

文本属性

文本颜色

color: red|#ff0000|rgb(255,0,0)

预定义颜色值，十六进制，rgb代码

对齐文本

text-align: center|left|right

text-align 只能用于水平对齐

装饰文本

text-decoration: none|underline 下划线|overline 上划线|line-through 删除线(不常用)

文本缩进

text-indent: X px |2 em;

首行缩进X 距离

行间距

line-height: X px;

行高: 上间距，文本高度，下间距；

引入方式

内部样式表
<style>
    p {
        color: red;
    }
</style>
  • 一般放于<head>内部
  • 控制整个html页面
  • 代码结构清晰，但并未实现结构与样式分离
行内样式表
<div style="color: red;font-size: 12px;">
    显示文本
</div>
外部样式表

样式单独写到CSS文件中，之后引用到HTML中

<link rel="stylesheet" href="css文件路径">
引入方式总结
样式表 优点 缺点 使用情况 控制范围
行内样式表 方便书写，权重高 结构样式混写 较少 控制一个标签
内部样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个界面
外部样式表 完全实现结构和样式分离 需要引入 最多 控制多个界面

Emmet语法

快速生成HTML

div+tab

div*x 多项

div+p 同等级

p.class|#id 默认填写类选择器和id选择器

.class$*5 按顺序生成 $自增

div{} 大括号默认文字

快速生成CSS

w100 简写属性和值