CSS语法规范
<head>
<style>
h1{
color:red;
font-size:12px;
}
</style>
</head>
<body>
<h1>标题</h1>
</body>
选择器 {一条或多条声明}
选择器和大括号中间最好加个空格
基础选择器
标签选择器
<style>
p {
color: red;
}
<style>
<p>12</p>
<p>12</p>
<p>12</p>
选择了所有的对应标签
类选择器
.类 {
}
<p class="类">123</p>
长名词或词组可以使用中横线来给选择器命名 -
多类名选择器
<div class="类名 类名"><div>
id选择器
#id {
}
<div id=""></div>
id只能调用一次，调用后别人无法使用
和类一样只能用英文，相比而言id用得少
通配符选择器
* {
}
选择所有的标签
字体属性
字体
font-family: ''
多个字体，如果前面的显示不出来会用后面的替换
文字大小
body {
font-size:16px;
}
h {
font-size:16px;
}
body可选择所有主体，但是标题标签需要特别指定
字体粗细
font-weight:
700或者bold 加粗
文字样式
font-style:
normal 正常
italic 斜体
字体复合属性
格式：font: font-style font-weight font-size/line-height font-family;
font: italic 700 16px 'Microsoft yahei'
顺序不能颠倒
文字大小和字体不能省略
文本属性
颜色
color: pink;
color: #FF0000
color: rgb(255,0,0)或者rgb(100%,0%,0%)
对齐文本
text-align: center
left right center
用来设置水平对齐
装饰文本
text-decoration:
none 默认
underline 下划线
overline 上划线
line-through 删除线
文本缩进
text-indent:
让每个首行缩进
em是一个相对单位，是当前元素的一个文字大小
行间距
line-height:
行间距包括上间距，文本高度，下间距
16px为默认值
样式表
内部样式表
-
控制整个HTML界面
-
没有完全分离
行内样式表
- 修改简单样式
- 不推荐大量使用
<p style = "color: blue"></p>
外部样式表
- 在外面写一个CSS，之后引用
- 最推荐使用
在HTML外部写一个CSS
<head>
<link rel="stylesheet" href="样式表名字.css">
</head>
CSS进阶 选择器
后代选择器
父选择器后所有的后代标签都可使用
父级选择器 后代选择器 {css}
子选择器
只选择父选择器的子节点
父选择器>子节点 {css}
并集选择器
选择器1，选择器2 {css}
交集选择器
选择器1选择器2 {css}
hover伪类选择器
鼠标悬停时的样式
任何标签都可以添加伪类
选择器:hover {css}
emmet语法
通过简写，快速生成代码
可自行查找
背景
背景色
rgba 红绿蓝透明度
背景平铺
background-repeat: repeat no-repeat
背景位置
属性名：background-position (bgp)
属性值：background-position: 水平方向位置 垂直方向位置
水平：left center right
垂直：top center bottom
元素显示模式
块级标签
- 独占一行
- 宽度默认父元素的宽度，高度默认由内容撑开
- 可以设置宽高
- 代表标签：div、p、h系列、ul、li、form、……
行内元素
- 一行可以显示多个
- 宽高由内容撑开
- 不可以设置宽高
- 代表标签：a、span、……
行内块元素
- 一行可显示多个
- 可以设置宽高
- 代表标签：input、textarea、button、……
- 特殊情况：img标签有行内块元素特点，但不是行内块
元素显示模式转换
| 属性 | 效果 | 使用频率 |
|---|---|---|
| display: block | 转换为块级元素 | 较多 |
| display: inline-block | 转换为行内块元素 | 较多 |
| display: inline | 转换为行内元素 | 极少 |
标签嵌套
-
块级元素一般作为大容器，可以嵌套：文本、块级元素、……
-
p标签不能嵌套div、p、h
-
a标签可嵌套任何元素
-
a标签不能嵌套a标签
CSS特性
继承性
- 子元素默认继承父元素样式的特点
- 所有控制文字的都能继承，所有不控制文字的都不能继承
- 有自己样式的不继承
层叠性
- 对于优先级相同的选择器，给同一标签
- 设置不同的样式，会共同生效
- 设置相同的样式，后面的会生效
盒子模型
优先级
继承<通配符<标签<类<id<行内<!important
排错
浏览器找到对应元素，右键审查
PxCook
盒子模型
CSS规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成
内容（content）
内容：width、height
边框（border）
border: 10px solid red;
粗细 样式 颜色
快捷键：bd+tab
样式：solid实线、dashed半虚线、dotted点线
场景：只给盒子某个方向设置边框
属性名：border-方位名词
属性值：连写的取值
内边距（padding）
padding:10px 20px 40px 80px
上 右 下 左
padding:10px 40px 80px
上 两边 下
padding:10px 80px
上下 左右
自动内减
给盒子设置属性box-sizing:border-box即可
外边距（margin）
和内边距一样写法
清除默认内外边距
* {
margin:0;
padding:0;
}
版心居中
加一个margin，将左右设置为auto即可
垂直布局的外边距
两个垂直布局的margin会合并取最大值
解决方法：一个赋值即可
行内元素的垂直内外边距
例如span
行内标签的margin-top和bottom不生效
同理，padding-top和bottom不生效
这是应该用行高属性 line-height
flex布局
多个div标签时，修改父div的display属性为flex
容器属性
| 属性 | 功能 |
|---|---|
| flex-direction | 控制排列方案 |
| flex-wrap | 控制换行 |
| flex-flow | 上面两个属性的结合 |
| justify-content | 对齐方式 |
| align-items | 纵轴的排列 |
项目属性
给子项目的属性
| 属性 | 功能 |
|---|---|
| order | 项目排列顺序 |
| flex-grow | 决定放的项目 |
| flex-shrink | 决定缩的项目 |
| flex-basis | 决定保持的项目 |
| align-self | 让项目有不同的对齐方式 |
扫一扫
1104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
