There are hundreds of CSS properties that you can use to change the way an element looks.
CSS实现方式
inline CSS
style=”prop1:val1; [prop2:val2;]”
更改 AnchorText, ButtonText等text部分的字体颜色
<h2 style="color:blue;">
CatPhotoApp
</h2>
CSS Selector
CSS Selector 主要用于对匹配的element实现样式渲染,匹配的方式主要有:
- Element 直接匹配
- CSS Class 匹配
- CSS ID 匹配
- Attribute 匹配
element {
prop1:val1;
[prop2:val2;]
}
Notice
- 元素需要置于头部
- property需要被置于{ }中
- 相邻property需要使用;进行分隔
Element 直接匹配
e : select all e
e1, e2 : all e1 and e2
e1 e2 : all e2 inside e1
e1>e2 : all e2 where the parent is a e1
e1+e2 : all e2 plased immediately after e1
e1~e2 : all same parent e2 after e1
h1 {
text-align: center;
}
div.p {
text-align: justify;
}
CSS Class
对CSS进行抽象,不直接对element进行样式的设置,使用抽象的CSS Class对具体的element或element群进行样式设置
CSS Class创建方式为以 . 起始的类名,其余与 CSS selector 相同
.blue-text {
color:blue;
}
将CSS Class应用于具体的element的方式为 将CSS Class赋给class属性
<h2 class="blue-text">
CatPhotoApp
</h2>
用一个element可以应用多个class, class间以 空格
相隔
CSS ID
除了CSS Class,还可以使用id的方式
#cat-photo-form {
background-color: green;
}
Attribute
通过Attribute进行匹配element,或通过属性值缩小所选element/class范围
[attribute] : 包含该attribute的element
[attr=value] : 包含该属性且值等于value的element
[type='checkbox'] {
margin-top: 10px;
margin-bottom: 15px;
}
[attr~=value] : 包含该属性且属性值包含 value完整词
[attr*=value] : 包含该属性且属性值包含 value词
[attr|=value] : 包含该属性且属性值以 value完整词
起始
[attr^=value] : 包含该属性且属性值以 value词
起始
[attr$=value] : 包含该属性且属性值以 value词
结尾
Notice:
所有 attribute selector 前,都可进行 element 或 class 限定
pseudo-classes
:hover
Selects on mouse over
:focus
Selects element who has been focused
:focus-within
元素获得焦点,或包含的后代元素获得焦点时,选取该element
::before
add something before a select element
::after
add something after a select element
使用 ::before
及 ::after
做一个心形
<style>
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
}
.heart::after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart::before {
content: "";
background-color: pink;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
</style>
<div class = "heart"></div>
CSS Property
Color
background-color 背景颜色
表示方式:
h4 {
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
}
- hsl(Hue, Saturation, Lightness)
Hue: [0, 360] — color
Saturation: percentage — gray percentage
Lightness: percentage — 0%(black) 100%(white)
.green {
background-color: hsl(120, 100%, 50%);
}
.cyan {
background-color: hsl(180, 100%, 50%);
}
.blue {
background-color: hsl(240, 100%, 50%);
}
opacity 透明度
background
fond-size
控制字体的大小:px
font-family
支持 fallback,若浏览器不支持第一种字体,将尝试下一种,以逗号间隔字体
There are two types of font family names:
- family-name - The name of a font-family, like “times”, “courier”, “arial”, etc.
- generic-family - The name of a generic-family, like “serif”, “sans-serif”, “cursive”, “fantasy”, “monospace”.
Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available. generic-family 是不区分大小写的,且不需要双引号包括 W3Scholl字体的例子 此外,还可以import Google字体库,在页面top位置,通过如下方式
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"
font-weight
字体粗细
100 — 细
600 — 粗
bold : 加粗
font-style
italic : 斜体
width
控制element的宽度:px / x%
height
控制element的高度:px / x%
top
%x
left
x%
z-index
识别覆盖优先级
整数, 数较大者 覆盖 数较小者
Boder
设置边缘,设置边缘宽度并不会减小原始element的大小,而是向外扩展
border-color
border-width
border-style
border-radius 边框圆角:px / percentage
border: 1px solid #ccc;
transform
旋转
transform: rotate(xxdeg);
尺寸
transfrom: scale(x.x) // 1 表示原始大小倍数
可以配合 pseudo-classes 进行动态展示
沿X轴倾斜
transform: skewX(10deg);
正度数表示逆时针倾斜
沿Y轴倾斜
transform: skewY(-10deg);
正度数表示顺时针倾斜
position
text-align
文字对齐
center : 居中
justify : 两端对齐,顶两端
left : 靠左,默认
right : 靠右
text-decoration
underline 下划线
line-through 删除线
box-shadow
阴影
The box-shadow
property takes values foroffset-x
(how far to push the shadow horizontally from the element),offset-y
(how far to push the shadow vertically from the element),blur-radius
, spread-radius
and a color value, in that order. The blur-radius
and spread-radius
values are optional.
#thumbnail {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
text-transform
改变 text 的展现形式
Value | Result |
---|---|
lowercase |
“transform me” |
uppercase |
“TRANSFORM ME” |
capitalize |
“Transform Me” |
initial |
Use the default value |
inherit |
Use the text-transform value from the parent element |
none |
Default: Use the original text |
line-height
行高
若行高高于font-size,则相当于调整行距
float
Floating elements are removed from the normal flow of a document and pushed to either the left
or right
of their containing parent element.
常与width(percentage)配合使用
datetime
A time element with a machine-readable datetime attribute.
Value | Description |
---|---|
YYYY-MM-DDThh:mm:ssTZD or PTDHMS |
The date or time being specified. Explanation of components: YYYY - year (e.g. 2011) MM - month (e.g. 01 for January) DD - day of the month (e.g. 08) T or a space - a separator (required if time is also specified) hh - hour (e.g. 22 for 10.00pm) mm - minutes (e.g. 55) ss - seconds (e.g. 03) TZD - Time Zone Designator (Z denotes Zulu, also known as Greenwich Mean Time) P - a prefix for “Period” D - a prefix for “Days” H - a prefix for “Hours” M - a prefix for “Minutes” S - a prefix for “Seconds” |
display
none : 不现实,并且 elements are removed from the normal flow of a document.
visibility
CSS 布局
padding
text 与 border 之间的距离, 下边界动态
padding-top
padding-right
padding-bottom
padding-left
margin
border 与 surrounding elements 之间的距离
margin-top
margin-right
margin-bootom
margin-left
实例
.main-container {
max-width: 1056px;
margin-left: auto;
margin-right: auto;
padding: 24px 16px 32px;
padding-top: 24px;
padding-right: 16px;
padding-bottom: 32px;
padding-left: 16px;
}
CSS 匹配优先级
Rule1
class的声明优先级,高于element
Rule2
后声明的class,优先级高于先声明的class
Rule3
ID 的优先级,高于class,与声明顺序与否无关
Rule4
Inline-style 方式的优先级高于以上3种
Rule5
如果十分确认某个CSS,为了防止其被覆盖,则可以使用 !important
的方式,避免覆盖的发生
body {
background-color: black;
font-family: monospace;
color: green;
}
#orange-text {
color: orange;
}
.pink-text {
color: pink !important;
}
.blue-text {
color: blue;
}
以上CSS样式style,对于字体颜色 color
属性,正常情况的覆盖顺序如下:
- body 作为优先级最低
- pink-text与blue-text作为class级别,优先级都高于body,但是blue-text声明的更晚,故blue-text覆盖前述
- orange-text属于ID,优先级高于class,覆盖之前
- pink-text class中,color 属性使用了
!important
修饰,优先级最高,故pink-text中的color属性将被最终使用
CSS 变量
CSS 变量定义:
--variable: value;
CSS 变量赋值
property: var(--variable);
配置 fallback 值,当浏览器无法解析时使用,或者debugging时使用
property: var(--variable, fallback_value);
将变量置于 :root
element中,将全局生效
:root {
--variable: value;
}
在指定CSS中对变量进行 over-write,将作用于局部作用域
Media Query 中使用 CSS Variable
:root {
--penguin-size: 300px;
--penguin-skin: gray;
--penguin-belly: white;
--penguin-beak: orange;
}
@media (max-width: 350px) {
:root {
--penguin-size: 200px;
--penguin-skin: black;
}
}