摘要：引入浏览器私有属性规则语法标识符标识符常用选择器简单选择器标签选择器类选择器选择器通配符选择器属性选择器选中属性属性包含属性选中属性值等于或开头的选中属性值以开头的选中属性值以结尾的选中属性值包含的伪类选择器以上两个只用
引入
浏览器私有属性
chrome, safari
-webkit-
firefox
-moz-
IE
-ms-
opera
-o-
@规则语法
@标识符 xxx;
@标识符 xxx {}
常用
@media
@keyframes
@font-face
选择器
简单选择器
标签选择器
p{color: red;}
类选择器
.className{color: red;}
id选择器
.idName{color: red;}
通配符选择器
*{color: red;}
属性选择器
/*选中属性*/
[att]{color: red;}
[disabled]{color: red;}
/*属性att=val*/
[att=val]{color: red;}
[type=button]{color: red;}
/*包含属性att=val*/
[att~=val]{color: red;}
/*选中属性值等于val或val-开头的*/
[att|=val]{color: red;}
/*选中属性值以val开头的*/
[att^=val]{color: red;}
/*选中属性值以val结尾的*/
[att$=val]{color: red;}
/*选中属性值包含val的*/
[att*=val]{color: red;}
伪类选择器
a:link{color: gray;}
a:visited{color: red;}
/*以上两个只用于链接*/
a:hover{color: green;}
a:active{color: orange;}
:enabled
:disabled
:checked 单选框 复选框
:first-child
:last-child
:nth-child(even) 选中偶数项
:nth-child(3n+1) 选中第1，4，7...项
:nth-last-child(3n+1) 选中第1，4，7...项
：only-child 选中只有一个子元素的项
:first-of-type
:last-of-type 其余同上
dd:first-of-type{color: red;}
dt:first-of-type{color: red;}
:only-of-type
span:only-of-type{color: red;}
不常用的伪类
:empty
:root
:not()
:target
:lang()
伪元素选择器
::first-letter 选中第一个字母
::firt-line 选中第一行
::before{content: "before"} 在某个元素之前插入content的内容
::after{content: "after"}
::selection 选中被选中的元素
组合选择器
后代选择器
.className p{color: red;}
子选择器
.className>p{color: red;}
兄弟选择器
/*选择h2之后的紧跟着p标签*/
.h2+p{color: red;}
/*选择h2之后的p标签*/
.h2~p{color: red;}
选择器分组
h1,h2,h3{color: red;}
css优先级
行内样式
ID选择器
类 伪类和属性选择器
标签选择器和伪元素选择器
css优先级改变
改变先后顺序
优先级相同，后面的会覆盖前面的
提升优先级选择器
在选择器前面加上标签选择器
!important
字体
font-size
px
em 基于父元素的倍数
百分比
font-family
font-weight
normal | bold | bolder | lighter
大多数字体只支持normal bold
font-style
normal
italic 斜体
oblique 倾斜（强制倾斜）
line-height
normal
px em
对齐方式
text-alogn
left
right
center
justify 两端对齐
vertical-align
baseline
sub 下标
super
top
text-top
middle
bottom
text-bottom
百分比
px
text-indent 缩进
px em 百分比
2em缩进2个字
格式处理
white-space 是否保留换行， 是否合并空格
normal 合并 会自动换行
nowrap 不换行
pre 保留换行 空格 tab
pre-wrap 在pre的基础上自动换行（常用）
pre-line 只保留还行
word-wrap
normal
break-word 长单词自动换行
word-break
normal
keep-all
break-all
文本修饰
text-shadow
/*x偏移，y偏移，模糊半径*/
text-shadow: x, y, radio, #f00;
text-decoration
underline 下
overline 上
line-through 中
高级设置
text-overflow
clip
ellipsis
/*一行显示文本，超出显示...*/ text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
cursor 鼠标形状
url
auto
default
none
help
pointer 手型
zoom-in 放大镜
zoom-out
move
强制继承
inherit
盒模型
边距 边框 填充 内容
margin border padding content
width
height
水平居中
margin: 0 auto;
border
border-width
border-style solid | dashed | dotted
border-color
border-radius 圆角
x 方向半径4个值 / y方向半径4个值
/*圆形*/ border-radius: 50%;
overflow
visible 默认
hidden 隐藏
scroll 滚动
auto 超出自动显示滚动条
box-sizing
content-box | border-box
box-shadow
/*水平偏移 垂直偏移 模糊半径 阴影大小 颜色*/ box-shadow: 4px 6px 3px 2px red; /*内阴影 水平偏移 垂直偏移 模糊半径 颜色*/ box-shadow: inset 4px 6px 3px red;
outline 轮廓， 不占空间
outline-width
outline-style solid | dashed | dotted
outline-color invert 和当前颜色相反
背景
background-color
#fff
rgb()
rgba()
transparent 全透明
始终在最底层
background-image
url()
多张图片， 先写的在上层
background-repeat
repeat-x | repeat-y | repeat | space | round(缩放铺满) | no-repeat
background-attachment
scroll
local 背景随内容移动
fixed
background-position
left right center top bottom
background-position: 10px 20px; background-position: right 10px top 20px; background-position: 20% 50%; /*居中*/ background-position: center center; background-position: 50% 50%;
应用 图标精灵
linear-gradient() 线性渐变
/*从上到下*/ background-image： linear-gradient(red, blue); /*从下到上*/ background-image： linear-gradient(to top, red, blue); background-image： linear-gradient(to right bottom, red, blue); /*从下往上 0度*/ background-image： linear-gradient(0deg, red, blue); /*三种颜色*/ background-image： linear-gradient(green, red, blue);
radial-gradient 径向渐变
background-image： radial-gradient(closest-side, red, blue); background-image： radial-gradient(farthest-side, red, blue); background-image： radial-gradient(closest-corner, red, blue); /*默认大小 最远距离*/ background-image： radial-gradient(farthest-corner, red, blue); background-image： radial-gradient(circle 100px, red, blue);
repeating--gradient 重复 为linear radial
background-origin 位置相对点
padding-box
border-box
content-box
background-clip 裁剪
padding-box
border-box 默认
content-box
background-size
px 百分比
auto
cover 撑满整个容器
contain 撑满整个容器 但宽高不能超出
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112526.html
摘要：黑体本系列讲解安全所需要的和黑体安全基础我的第一个网页黑体安全基础初识黑体安全基础初识标签黑体安全基础文件夹管理网站黑体安全基础模块化黑体安全基础嵌套列表黑体安全基础标签拓展和属性的使用黑体安全基础嵌套本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基...
摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...
摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...
摘要：上面五个问题就是我总结的基础概念，学习过程中一定要把它们弄明白别忘了有哦。 请带着以下几个问题进行学习 CSS是什么 CSS的引用方式 CSS选择器 CSS优先级 CSS盒模型 基础知识学习和实例演练教程 MDN中css教程CSS基础学习教程（css快速入门）CSS参考手册（便于了解更多css属性）CSS3教程（适用于移动端开发的css新特性） 入门学习，一定要快，没有必要花大量时...
摘要：派生选择器依据元素的位置关系来定义样式。称其为上下文选择器，称其为派生选择器。在现在布局中，选择器常常用于建立派生选择器。和一样，也可被用作派生选择器。 文章大纲来源：【Day 3】HTML复习 + CSS基础 初识CSS 入门CSS 初识CSS 层叠样式表（Cascading Style Sheets），即前端常说的CSS。 内容引用：CSS 简介 样式解决了什么问题？ HTML...
阅读 2487·2023-04-25 19:13
阅读 3624·2021-09-22 15:34
阅读 2909·2019-08-30 14:23
阅读 1346·2019-08-29 17:17
阅读 1467·2019-08-29 16:05
阅读 1427·2019-08-29 13:26
阅读 1033·2019-08-29 13:19
阅读 385·2019-08-29 13:16
