003 CSS介绍

最新推荐文章于 2024-09-06 09:38:49 发布

简洁冬冬

最新推荐文章于 2024-09-06 09:38:49 发布

阅读量737

点赞数 9

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/m0_46695127/article/details/137209110

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

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是否可用

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>? 边框阴影

《背景》相关属性
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：背景是否延伸