文章目录
CSS表示层叠样式表(Cascading Style Sheet,又称串样式列表、级联样式表、串接样式表、阶层式样式表)是为网页添加样式的代码。
CSS的出现是为了美化HTML,并让结构(HTML)与样式(CSS)分离;
美化方式一:为HTML添加各种各样的样式,比如颜色、字体、大小、下划线等等;
美化方式二:对HTML进行布局,按照某种结构显示(CSS进行布局-浮动、flext、grid)
CSS编写
属性名
属性值
三种方法
内联样式(inline style)
内部样式表(internal style sheet)、文档样式表(document style sheet)、内嵌样式表(embed style sheet)
外部样式表(external style sheet)
内联样式表存在于HTML元素的style属性中,在Vue的template中某些动态的样式是会使用内联样式
内部样式表将CSS放在HTML文件元素里的
外部样式
1 index.css
@import url(xxxtest1.css);
@import url(xxxtest2.css);
2 test1.css
2 test2.css
3 test.html
<html>
<head>
<link rel="stylesheet" href="xxxindex.css">
</head>
<body></body>
</html>
css的注释
<html>
<head>
<style>
/* css的注释 */
</style>
</head>
<body>
</body>
</html>
css的官方文档
https://www.w3.org/TR/?tag=css
css推荐文档
查询某些CSS是否可用
https://caniuse.com
browserlist
CSS常用样式
① 定位(Position)和布局(Layout)
position
top/bottom/left/right
z-index
float/clear
flexbox:flex-direction justify-content align-items等等
② 展示(Display)和可见(Visibility)
display
opacity
visibility
③ 盒子模型(Box Model)顺序
margin
box-shadow
border
border-radius
width/height
padding
④ 背景设置(Background)
background
⑤ 字体(Font)、文本(Text)
font-family/font-size/font-weight/font-style
line-height
text-align/text-transform
color
⑥ 其他属性(Other Property)
overflow
clip
cursor
transform
animation、transition
white-space
CSS常见属性
CSS值规则阅读:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Value_definition_syntax#hash_mark
《字体》相关属性
font-family:指定字体
font-size:字体大小,要注意有绝对大小,相对大小,长度,百分比
font-style:正常体、斜体、倾斜体
font-weight:设置粗体
font-variant:用来将所有字体都变成大写,但是原来是大写的字体呢又要比默认的要大一些
font:[ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]
line-height:normal/数字/长度/百分比
text-align: 对齐方式,取值为:left, right, center和justify(两侧对齐)
text-decoration:设置颜色、位置、样式。分别对应了text-decoration-color,text-decoration-line,text-decoration-style.
常用decoration-line的值:none | [ underline || overline || line-through || blink ] | spelling-error | grammar-error
text-indent:缩进,段落第一行文本要空多少距离,单位为长度
text-shadow:阴影设置,none | <shadow-t>#
text-transform:大小写转换
text-indent:缩进,段落第一行文本要空多少距离,单位为长度
text-overflow:文本溢出的截断
white-space:设置如何处理元素中的 空白,长设置属性normal/nowrap
vertical-align: 垂直对齐方式(较复杂,听视频讲解)
word-spacing:word和word之间的间距
letter-spacing:letter和letter之间的间距
word-break:文字换行,normal、break-all/keep-all/break-word
color:字体颜色
opacity:不透明度(0为透明,1为不透明)
《盒子》相关属性
width:设置盒子宽度
height:设置盒子高度
max-width/max-height:最大宽度、高度
min-width/min-height:最小宽度、高度
margin、margin-left、margin-right、margin-top、margin-top:外边距
padding、padding-left、padding-right、padding-top、padding-bottom:内边距
border、border-width、border-style、border-color:边框
border-radius:边框圆角
outline:边框(不占据空间)
box-shadow:inset? && <length>{2,4} && <color>? 边框阴影
《定位》相关属性
position:定位(static | relative | absolute | sticky | fixed)
left、right、top、bottom:设置定位位置
z-index:设定了一个定位元素及其后代元素或 flex 项目的 z-order
float:浮动(left | right)
clear:清除浮动
display:设置元素的内部、外部显示类型
visibility:元素显示(visible | hidden | collapse)
overflow:超出部分的显示(visible | hidden | scroll | auto)
《背景》相关属性
background
[ <bg-layer> , ]* <final-bg-layer>
<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
<final-bg-layer> = <'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
background-color:背景颜色
background-image:背景图片
background-position:背景位置
background-size:背景大小
background-repeat:重复次数
background-attachment:背景图片的位置是否固定
background-origin:背景图片属性的原点位置的相对区域border-box | padding-box | content-box
background-clip:背景是否延伸