初识CSS

最新推荐文章于 2022-06-16 22:38:23 发布

乱炖_

最新推荐文章于 2022-06-16 22:38:23 发布

阅读量166

点赞数

分类专栏：前端自学之路文章标签： css html5 css3

本文链接：https://blog.csdn.net/u012779308/article/details/115369705

版权

前端自学之路专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS常用属性
属性	说明
background-color	元素的背景颜色
border	围绕元素的边框
color	元素的前景颜色
font-size	元素文字的字号
height	元素高度
width	元素宽度
padding	元素内容与边框之间的间距
text-decoration	元素文字的装饰效果

CSS的使用方法

元素内嵌样式（内联样式）

<!-- 像是把样式写在元素开始标签内的，称作内嵌样式，也叫内联样式 -->
<a style="background-color:red; color:black;">CSDN</a>

文档内嵌样式（内部样式）

<!-- 像是在同文档head元素包含的style元素中所写的样式 -->
<!-- 称作文档内嵌样式，也就是内部样式 -->
<head>
    <style type="text/csss">
        <!-- 样式内容 -->
    </style>
</head>

外部样式

<!-- 像是在head元素中使用link元素导入外部样式表 -->
<!-- 被称作使用外部样式 -->
<head>
    <link rel="stylesheet" type="text/css" href="CSS样式表所在地址"></link>
</head>

也可以使用“@import”在一个样式表内导入其他样式表

/**
    在此样式表内导入style.css的内容
    @import导入样式的语句必须位于除了@charset之外的最顶端
    @charset用于声明样式表使用的字符编码集
**/
@charset "UTF-8";
@import "style.css";

a {
    background-color:black;
    color:red;
}

样式的层叠和继承

关于样式的来源还有其他两种

浏览器默认样式·
- 多数元素都会有一个浏览器样式，比如a元素
用户自定义样式
- 大部分浏览器允许用户自定义样式
- 比如谷歌会在个人配置信息目录中生成Default\UserStyleSheet\Custom.css的文件
- 添加到该文件的样式会应用到用户访问的所有网站

样式的层叠顺序

元素内嵌样式（用全局属性style定义的样式）
文档内嵌样式（定义在style元素中的样式）
外部样式（用link元素导入的样式）
用户样式（用户定义的样式）
浏览器样式（浏览器应用的默认样式）

！important

将样式的属性值标记为重要，可以改变正常的层叠次序。

用户自定义样式的重要程度大于作者定义样式的重要程度

同级样式冲突

可以根据样式的具体程度和定义次序来解决同级样式冲突

越具体的样式优先级越高，越靠后的样式优先级越高

继承

如果浏览器在直接相关的样式中找不到某个属性的值，就会借助于继承机制，使用父元素的样式属性值。

与元素外观有关的样式会被继承；

与元素在页面上布局相关的样式不会被继承；

在样式中，如果将一个属性的属性值设定为inherit，则表示该元素会继承父元素的样式。

颜色

颜色的英文名称。如：red,grey....
十六进制表示。如：#FFFFFF表示白色
RGB模型。rgb(r,g,b)或者rgb(r,g,b,a)；其中a表示透明度，0代表全透明，1代表完全不透明。
HSL模型。hsl(h,s,l)或者hsl(h,s,l,a)。以百分比来表示色相（hue）,饱和度（saturation）,明度（lightness）。

长度

绝对长度
- 像是cm,dm这种现实世界的度量单位被称为绝对长度

相对长度

CSS相对单位
单位标识符	说明
em	与元素字号挂钩
ex	与元素字体的“x高度”挂钩
rem	与根元素的字号挂钩
px	CSS像素（假定显示设备的分辨率为960dpi）
%	另一属性值的百分比

像em,rem这种跟某一个元素属性值挂钩的被称为相对长度
px原本设定为相对长度，但在大部分浏览器中被当做绝对长度对待

另一些不常用的CSS相对单位
单位标识符	说明
gd	与网格（grid）挂钩。它依赖于CSS规范中一些定义不太明确的属性
vw	与视口（viewport）宽度挂钩。1vw等于文档显示区域（如浏览器窗口）宽度的1%
vh	与视口高度挂钩。1vh等于文档显示区域高度的1%
vm	1vm等于最短视口轴长（高度和宽度中较小的那个）的1%
ch	与用当前字体显示的字符的平均宽度挂钩。

CSS也允许将calc算式作为属性值

p {
    /* 宽度为包含块的80%减去20px **/
    width: calc(80% - 20px);
}

角度

CSS角度单位
单位标识符	说明
deg	度（取值范围：0deg~360deg）
grad	百分度（取值范围：0grad~400grad）
rad	弧度（取值范围：0rad~6.28rad）
turn	圆周（1turn等于360deg）

时间

CSS时间单位
单位标识符	说明
s	秒
ms	毫秒（1s等于1000ms）

乱炖_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识CSS

CSS常用属性属性说明 background-color 元素的背景颜色 border 围绕元素的边框 color 元素的前景颜色 font-size 元素文字的字号 height 元素高度 width 元素宽度 padding 元素内容与边框之间的间距 text-decoration 元素文字的装饰效果 CSS的使用方法元素内嵌样式（内联样式）<!-- 像是把样式写在元素开始标签内的，称作内.
复制链接

扫一扫