CSS basic part
2021-05-29 14:01
YPE html>
标签：绘制 级联 字节 全局 repeat tips man mil 区域
CSS
简介
- 名字：cascading style sheet 层叠级联样式表
- 作用：是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言
- 特点：丰富的样式定义，易于使用和修改，多页面应用，层叠，页面压缩
入门
插入CSS
可以在HTML的中添加
也可以在添加
- 列如
- 4 @import URL("") 在style中用
选择器
基本选择器
- 标签选择器（例如 h1{})
- 类选择器 (.class{})
- id选择器(#id{} 全局唯一，不能重复使用同一个id)
- 精确度越高优先级越高
层次选择器
- 后代选择器 标签1 标签2{} 选择标签1元素内的所有标签2元素
- 子选择器 标签1>标签2{} 选择所有父级是标签1元素的标签2元素
- 相邻选择器 标签1 + 标签2{} 选择所有紧接着标签1元素之后的标签2元素
- 通用选择器 标签 ~ 标签{} 当前选中元素的向下的所有兄弟元素
属性选择器
标签[属性名=属性值（属性）]{}
结构伪类选择器
:first-child{}
:last -child{}
:nth-child(){} 例如 p:nth-child(1) 是其父元素的第一个子元素。还要是p元素。
:nth-of-type(){} 例如 p:nth-of-type(2) 规定属于其父元素的第2个 p 元素的每个 p：
:hover
代码
Title
000
s1
s2
s3
-
p1
-
p2
-
p3
-
p4
-
p5
body>p{
color: blue;
}
.omg+p{
color: blanchedalmond;
}
.omg~p{
font-size: x-large;
}
ul{
background: aqua;
}
ul li{
color: gold;
}
ul [class="game"]{
text-align: center;
}
.game{
background: brown;
}
.life{
background: cornflowerblue;
}
#fuck{
background: forestgreen;
}
#fuck:hover{
font-size: xx-large;
}
美化
(span起到重点强调作用)
字体
（CSS字体属性定义字体，加粗，大小，文字样式）
- color 设置字体的颜色
- font - style 风格 （关键词： normal italic（斜体） oblique（斜体）
- font - family 字体 (可以定义一系列的字体从前往后查看调用第一个能用的字体，中文字体靠后)
- font - size 字体大小 （关键词： small large ... 数值 px 数值%）
- font - weight 字体粗细（关键词：normal bold bolder lighter 数字400相当与normal）
tips ：font ： 字体 大小 行高 字体风格
- font-style
- font-weight
- font-size/line-height
- font-family
可以不设置其中的某个值， 也是允许的。未设置的属性会使用其默认值。
文本
- text-align 文本对齐 （关键词：center left right justify）
- vertical-align 垂直对齐（关键词： top middle bottom）
- text-transform 文本转换（关键词： uppercase lowercase capitalize）
- text-indent 首行缩进（2em 缩进两字节）
- line-height 行高间距
- text-decoration 下划线设置（关键词：none overline line-through underline）
- text-shadow 文本阴影（水平阴影 垂直阴影 模糊效果 颜色）
超链接
- :visited 选择所有已访问的链接
- :link 选择所有未被访问的链接。
- :hover选择鼠标悬停其上的链接。
- :active 选择活动的链接
tips：:hover 必须被置于 :link 和 :visited 之后，才是有效的。
:active 必须被置于 :hover 之后，才是有效的
列表
- list-style-type 列表（关键词： 无序列表 circle square 有序列表 upper-roman lower-alpha 删除默认设置 none）
- list-style-position 指定列表项标记（项目符号）的位置（ inside outside）
- list-style-image 将图像设置为列表项标记
tips:list-style : type position image
背景
-
background-image : 一个元素添加多幅背景图像。不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者
-
background-size: 指定背景图像的大小(关键词：contain cover 数值px)
-
background-origin：指定背景图像的位置
- border-box - 背景图片从边框的左上角开始
- padding-box -背景图像从内边距边缘的左上角开始（默认）
- content-box - 背景图片从内容的左上角开始
-
background-clip 指定背景的绘制区域
- border-box - 背景绘制到边框的外部边缘（默认）
- padding-box - 背景绘制到内边距的外边缘
- content-box - 在内容框中绘制背景
tips：background: image position repeat
盒子模型
border
边框 (围绕在内边距和内容外的边框)
- border-style 边框样式(关键词：none dotted dashed...)
- border-width 边框宽度(关键词（没有具体值）：thick medium thin px em)
- border-color 边框颜色
`name - 指定颜色的名称，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16进制值, 如 "#ff0000"
tips： border: width style color
margin
外边距 (清除边框外的区域，外边距是透明的)
- margin-top
- margin-bottom
- margin-right
- margin-left
tips: margin: top right bottom left/ top right&left bottom/top&bottom right&left
padding
内边距 (清除内容周围的区域，内边距是透明的)
基本和margin一致
边框up
- border-radius 圆角
- box-shadow 盒子阴影
- border-image 边界图片
浮动
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响
-
float 浮动
left right none inherit -
display 显示
none inline block -
clear 清理浮动
left right none inherit both -
overflow 下拉框
visible hidden scroll auto inherit
定位
position
- static 默认定位
- relative 相对定位元素的定位是其的正常的位置
- fixed 相对于浏览器窗口是固定位置
- absolute 相对于已定位的父元素，若无则相对于
- sticky 粘性定位 例如一键返回顶部
重叠元素
z-index (number auto inherit)
标准流盒子，低于浮动的盒子，浮动的盒子又低于定位的盒子。
定位高于浮动，浮动高于标准流。（高低和占不占位置无关）
用法：
1、必须有定位。（除去static之外）。
2、给定 z-index 的值为层级的值。（不给默认为0）
- a. 层级为0的盒子，也比标准流和浮动高。
- b. 层级为负数的盒子，比标准流和浮动低。
- c. 层级不取小数
- d. 层级一样，后面的盒子比前面的层级高。
- e. 浮动或者标准流的盒子，后面的盒子比前面的层级高。
- f. absolute是不占位置的，relative是站位的的。而层级的高低，是和占不占位置没有关系的。
CSS basic part
标签：绘制 级联 字节 全局 repeat tips man mil 区域
原文地址：https://www.cnblogs.com/canmeng196/p/14728521.html
上一篇：使用Flask写Web接口（一）
下一篇：容易遗忘的HTML知识点