Open joephon opened 5 years ago
CSS 是 Web 三大核心技术之一
CSS
Web
JS 处理业务逻辑,HTML 撑起整体骨架,CSS 处理页面细节
JS
HTML
html { height: 100% } .class { color: red } #id { height: 100%; color: yellow }
html 是标签名,class 是类名, id 是 id
html
class
id
CSS 可以通过标签名、类名和 id 来找到对应的元素
元素名直接写,类名前面加个 ".",id 前面加个 "#"
当 CSS 样式只有一行的时候,末尾的分号 ";" 可以省略,多行时不可省略。
CSS 可以为特定的元素订制样式
方法是直接指定标签名
html { height: 100% } div { color: red } input { height: 100%; color: yellow }
html、div、input 都是 HTML 的标签
div
input
直接指定标签名定义样式的时候,整个 HTML 文档流里的所有此类标签都将拥有的样式
CSS 也可以为拥有同样类名的元素订制样式
方法是直接指定该类名
.class1 { height: 100% } .class2 { color: red } .class3 { height: 100%; color: yellow }
class1、class2、class3 都是类名
class1
class2
class3
一个元素可以拥有多个类,当大于两个的时候,元素的样式将由这些类来共同决定
相同的属性会彼此覆盖,规则是后者覆盖前者
CSS 还可以为拥有特定 id 的元素订制样式
方法是直接指定该元素的 id
#id1 { height: 100% } #id2 { color: red } #id3 { height: 100%; color: yellow }
id1、id2、id3 都是元素的 id
id1
id2
id3
一个元素可以拥有多个类,但只能有一个 id
用 CSS 给元素定义样式的时候,你需要为其书写属性和属性特定的值
attribute : value
attribute
value
selector { attribute: value; ... } 选择器 { 属性: 属性值; ... } html { width: 100%; height: 100%; }
前面两个是中英文 伪代码 ,最后一个才是真实例子
伪代码
CSS 的属性被一个分号隔开,左边是属性名,右边为属性的值
CSS 描述一个元素的大小,需要用两个属性
width 和 height 即:宽和高
width
height
html { width: 100%; height: 100px } body { width: 100rem; height: 100em }
width 和 height 的值有 4 种类型
px、 百分比、 rem 和 em
px
百分比
rem
em
CSS 里横的那条是宽,竖的那条是高,记住咯
CSS 给一个元素上色,有两个属性
color 和 background-color 即:颜色和背景颜色
color
background-color
div { color: red; background-color: #fff } p { color: rgb(0,0,0); background-color: rgba(255,255,255,0.8) }
color 和 background-color 的值有 4 种类型
颜色名、 HEX、 RBG 和 RGBA
颜色名
HEX
RBG
RGBA
color 被用来定义文本的颜色
background-color 则被用来定义元素的背景颜色,或者说~填充颜色
CSS 定义元素之间的距离,有两个属性
padding 和 margin 即:内边距和外边距
padding
margin
div { padding: 100px; margin: 100px } p { padding: 100px 50px; margin: 100px 50px } h1 { padding: 100px 40px 50px 60px; margin: 100px 40px 50px 60px; }
padding 定义了元素的内边距,margin 定义了元素的外边距,
只写一个数值的话,表示上下左右都一样。
写两个数值的话,第一个表示上下,第二个表示左右
四个都写的话,第一个表示上,第二个表示右,第三个表示下,第四个表示左
上右下左,记住咯
上右下左
padding 和 margin 的属性值除了 px,也可以是 百分比、rem 和 em
只要属性值是数值,一般都可以是这四种类型。
CSS 所有块级元素都有一层皮,这层皮叫边框。
border 即:边框
border
div { border: 1px solid red }
border 定义元素的边框
1px 定义了边框的厚度
1px
solid 定义了边框的类型为实线
solid
red 定义了边框的颜色为红色
red
1px、solid 和 red 的顺序是可以任意调换了
CSS 为文本元素提供了丰富的控制属性
最常用的有 font-size、font-weight、text-align 和 line-height
font-size
font-weight
text-align
line-height
span { font-size: 20px; font-weight: bold; text-align: center; line-height: 30px }
font-size 定义文本的字体大小
font-weight 定义文本的粗细
text-align 定义文本的排列模式:居中、居右还是居左
line-height 定义文本的行高
font-weight 的常用可选择有:bold、normal 和 100 - 900 的范围值
bold
normal
400 等同于 normal,700 等同于 bold
text-align 的常用可选择有: center、left 和 right
center
left
right
HTML 拥有多种布局方式
可使用 CSS 的 display 属性来定义
display
div { display: block } p { display: none } a { display: inline } .class { display: inline-block } .class2 { display: box } .class3 { display: flex }
block 表示块级布局方式
block
none 表示不显示
none
inline 表示内联布局方式
inline
line-block 表示行内块布局方式
line-block
box 表示盒子布局方式
box
flex 表示弹性盒子布局方式
flex
想要更好地掌握 CSS 布局,很有必要深入了解什么是 盒子 模型
盒子
HTML 文档流存在着多种定位模式
可使用 CSS 的 position 属性来定义
position
div { position: static } div { position: relative; left: 20px; top: 10px; } div { position: absolute; right: 20px; bottom: 10px; } div { position: fixed; left: 0; bottom: 0; }
static 是默认文档流
static
relative 表示相对定位
relative
absolute 表示绝对定位
absolute
fixed 表示固定定位
fixed
position 的值如果不是 static 一般与之相随的还有:
top、bottom、left 和 right,分别对应上、下、左、右
top
bottom
通常情况下,上下左右只需要写两个就可以了。
CSS 有两种注释风格
单行://,多行: /**/
//
/**/
// 我是单行注释 div { position: relative; // left: 20px; top: 10px; } /* 我是多行注释 */ div { position: absolute; /* right: 20px; bottom: 10px; */ }
被注释掉的代码,会被程序忽略,注释的作用是给程序员一点方便
对代码块进行标记或临时性屏蔽
♦️ A CSS 的作用
CSS
是Web
三大核心技术之一JS
处理业务逻辑,HTML
撑起整体骨架,CSS
处理页面细节栗子
html
是标签名,class
是类名,id
是 idCSS
可以通过标签名、类名和 id 来找到对应的元素元素名直接写,类名前面加个 ".",id 前面加个 "#"
小知识点
当
CSS
样式只有一行的时候,末尾的分号 ";" 可以省略,多行时不可省略。♦️ 2 指定元素
CSS
可以为特定的元素订制样式方法是直接指定标签名
栗子
html
、div
、input
都是HTML
的标签小知识点
直接指定标签名定义样式的时候,整个
HTML
文档流里的所有此类标签都将拥有的样式♦️ 3 指定类名
CSS
也可以为拥有同样类名的元素订制样式方法是直接指定该类名
栗子
class1
、class2
、class3
都是类名小知识点
一个元素可以拥有多个类,当大于两个的时候,元素的样式将由这些类来共同决定
相同的属性会彼此覆盖,规则是后者覆盖前者
♦️ 4 指定 id
CSS
还可以为拥有特定 id 的元素订制样式方法是直接指定该元素的 id
栗子
id1
、id2
、id3
都是元素的 id小知识点
一个元素可以拥有多个类,但只能有一个 id
♦️ 5 样式的属性
用
CSS
给元素定义样式的时候,你需要为其书写属性和属性特定的值attribute
:value
栗子
前面两个是中英文
伪代码
,最后一个才是真实例子小知识点
CSS
的属性被一个分号隔开,左边是属性名,右边为属性的值♦️ 6 宽和高
CSS
描述一个元素的大小,需要用两个属性width
和height
即:宽和高栗子
width
和height
的值有 4 种类型px
、百分比
、rem
和em
小知识点
CSS
里横的那条是宽,竖的那条是高,记住咯♦️ 7 颜色和背景颜色
CSS
给一个元素上色,有两个属性color
和background-color
即:颜色和背景颜色栗子
color
和background-color
的值有 4 种类型颜色名
、HEX
、RBG
和RGBA
小知识点
color
被用来定义文本的颜色background-color
则被用来定义元素的背景颜色,或者说~填充颜色♦️ 8 内边距和外边距
CSS
定义元素之间的距离,有两个属性padding
和margin
即:内边距和外边距栗子
padding
定义了元素的内边距,margin
定义了元素的外边距,只写一个数值的话,表示上下左右都一样。
写两个数值的话,第一个表示上下,第二个表示左右
四个都写的话,第一个表示上,第二个表示右,第三个表示下,第四个表示左
上右下左
,记住咯小知识点
padding
和margin
的属性值除了px
,也可以是百分比
、rem
和em
只要属性值是数值,一般都可以是这四种类型。
♦️ 9 边框
CSS
所有块级元素都有一层皮,这层皮叫边框。border
即:边框栗子
border
定义元素的边框1px
定义了边框的厚度solid
定义了边框的类型为实线red
定义了边框的颜色为红色小知识点
1px
、solid
和red
的顺序是可以任意调换了♦️ 10 文本
CSS
为文本元素提供了丰富的控制属性最常用的有
font-size
、font-weight
、text-align
和line-height
栗子
font-size
定义文本的字体大小font-weight
定义文本的粗细text-align
定义文本的排列模式:居中、居右还是居左line-height
定义文本的行高小知识点
font-weight
的常用可选择有:bold
、normal
和 100 - 900 的范围值400 等同于
normal
,700 等同于bold
text-align
的常用可选择有:center
、left
和right
♦️ J 布局
HTML
拥有多种布局方式可使用
CSS
的display
属性来定义栗子
block
表示块级布局方式none
表示不显示inline
表示内联布局方式line-block
表示行内块布局方式box
表示盒子布局方式flex
表示弹性盒子布局方式小知识点
想要更好地掌握
CSS
布局,很有必要深入了解什么是盒子
模型♦️ Q 定位
HTML
文档流存在着多种定位模式可使用
CSS
的position
属性来定义栗子
static
是默认文档流relative
表示相对定位absolute
表示绝对定位fixed
表示固定定位小知识点
position
的值如果不是static
一般与之相随的还有:top
、bottom
、left
和right
,分别对应上、下、左、右通常情况下,上下左右只需要写两个就可以了。
♦️ K 注释
CSS
有两种注释风格单行:
//
,多行:/**/
栗子
小知识点
被注释掉的代码,会被程序忽略,注释的作用是给程序员一点方便
对代码块进行标记或临时性屏蔽
这篇文章价值九元