CSS知识点01

三七yiii

已于 2022-03-14 19:41:45 修改

阅读量316

点赞数 1

文章标签： css 前端 css3 html javascript

于 2022-03-02 18:48:35 首次发布

本文链接：https://blog.csdn.net/m0_65208646/article/details/123228798

版权

、

一.CSS是什么？

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML等文件样式的计算机语言。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS的优点：

使HTML专注于网页的内容，CSS专注于网页的表现
提供了丰富的格式化功能
可以针对各种可视化浏览器（主要有显示器、打印机、PDA等）来设置不同的样式

二、CSS引入方式

1.行内样式

直接在开始标签上加style属性来控制样式。例如：
<div style="color:red;">内容</div>

2.内嵌式

所有的样式都写到一个<style></style>内部，该标签放<head></head>内部。例如：

        <style type="text/css">
              选择器{ 样式属性名：属性值 ; }
           </style>

示例：
<style type="text/css">
    p{
      color: #DF0101;
    }
    div{
        background-color: pink;
    }
</style>

3.外链式

所有的样式都写到一个单独的css文件里（文件后缀是 .css）,通过在<head></head>内部用<link rel="stylesheet" href="css文件路径">来引入该css文件。

示例：
<link rel="stylesheet" type="text/css" href="css文件路径"/>

4.导入式

所有的样式都写到一个单独的css文件里，通过在style或者css内部用@import url("css文件路径");或者@import "css文件路径";来导入外部样式。例如：
<style type="text/css">
		@import url("css文件路径");
</style>

5.优先级

遵循后来者居上原则，最后加载的标签会覆盖先加载的标签，一般行内样式优先级最高。

示例：

<link rel="stylesheet" type="text/css" href="css/01.css"/>
<style type="text/css">
		@import url("css/01.css");
			div{
				color: #DF0101;
			}
		</style>
	</head>
	<body>
		<div style="color: red;">内容</div>
    </body>
<!--该代码优先级从低到高 外链式<导入式<内嵌式<行内样式 ，该代码最后显示的颜色为红色-->

6. link和@import的区别

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持。

三、选择器

权重：类似于优先级，优先级高的样式会覆盖优先级低的样式。

1. 通配符选择器
    *{
   样式属性名 : 属性值 ;
   ...
     }

示例：
*{
background-color: pink;
}

/*常用来做元素格式化*/

2. 标签选择器
   标签名{
   样式属性名 : 属性值 ;
   ...
   }

示例：
p{
 background-color: pink;
}

3. 类选择器
   .类值{
   样式属性名 : 属性值 ;
   ...
   }

示例：
.in{
    color: pink;
}

4. id选择器
   #id值{
   样式属性名 : 属性值 ;
   ...
   }

示例：
#d1{
color: pink;
}

5. 包含选择器
选择器E 选择器F{
   样式属性名 : 属性值 ;
   ...
   }

示例：
div span{
    color: pink;
}

6.分组选择器

选择器E，选择器F,...{ }

div,span,p{
		    color: red;
			}
/*不同的选择器有相同的样式*/

div #s1,
p{
	color: #008000;
}
/*选中div下id为s1的元素和所有p元素*/

名称	选择器	示例	示例说明	权重
通配符选择器	*	*	选择所有元素	0.5
标签选择器	element	p	选择所有<p>元素	1
类选择器	.class	.in	选择所有class="in"的元素	10
id选择器	#id	#d1	选择所有id="d1"的元素	100
包含选择器	选择器E 选择器F	div span	选择<div>元素内的所有<span>元素	权重相加
分组选择器	选择器a,选择器b	diiv,span	选择所有<div>元素和<span>元素

四. CSS的长度单位

基本单位：px和em

（1）px（像素）

        根据显示器分辨率的不同，像素的大小也是不同的。

（2）em,以当前字符的高度为基准

        如果当前字体的高度为12px，那么1em就是12px。

        注意：一般以font-size为准，如果没有定义font-size，则以浏览器默认大小（16px）为准。

（3）cm/mm/pt/pc

        主要用在非显示器输出上，如打印。
        如果网页在显示器上显示，则这些单位将转换为一定的像素显示，即长度也是依靠显示器分辨率的。

五. CSS中的颜色表达

网页中颜色采用RGB模式显示（显示器）
RGB颜色在CSS中的表达方式：

直接使用颜色的英文单词，如red

示例：
<div style="color:red;">内容</div>
注意：很多浏览器不支持颜色的单词表示

使用三色的数值，rgb(,,,)

         （1）rgb(红,绿,蓝) 如rgb(255,0,0) 表示红色。

                注意：数值在0~255之间

示例：
<div style="color:rgb(255,0,0);">内容</div>

<div style="color:rgb(0,255,0);">内容</div>

（2）rgba（红，绿，蓝，不透明度） a表示不透明度，取值为0到1

（3）使用三色的百分比，如rgb(10%,20%,100%)

使用三色数值的十六进制，如#ff0000

注意：推荐使用这种方式，十六进制值前加#

示例：
<div style="color:#ff0000;">内容</div>

六、字体相关样式

1. 字体大小 font-size

(单位px，em)

示例：
font-size: 2em;
font-size: 12px;

2. 字体系列 font-family

设置多个字体时，多个字体间用逗号隔开。
如果设置的字体名字里有空格的，必须用引号引起来。设置多个字体，按照电脑上有哪个优先使用哪个，否则就浏览器自动选择。

示例：
font-family: '宋体',"microsoft yahei";
/*宋体或者微软雅黑*/

3. 字体风格 font-style

normal   正常不倾斜
italic   斜体
oblique   倾斜

示例：
font-style: normal;  /* 正常 */
font-style: oblique; /* 斜体 */
font-style: italic;  /* 倾斜 */

4.字体粗细    font-weight

normal 正常不加粗
bold   加粗
bolder   粗体
lighter 细体
100-900 9个层次数值越大，字体越粗 100-300细体 400-500正常 600-900粗体

示例：
font-weight:normal ;/* 正常 */
font-weight:bold; /* 加粗 */
font-weight:bolder; /* 粗体 */
font-weight: lighter; /* 细体 */
font-weight: 400; /* 400正常 */

5. 行高 line-height

值：1.数值+单位

2. 数值（无单位）表示倍数

示例：
line-height: 24px; /* 行高为24像素 */
line-height: 10; /* 行高为字体大小的10倍 */

6. 字体样式缩写

font : font-style值 font-weight值 font-size值 / line-height值 font-family值 ;

示例：
font: italic bold 24px/12px "宋体";
/* 表示字体风格为斜体，字体粗细为加粗，字体大小为24像素，行高为12像素，字体系列为宋体。*/
/*注：样式之间用空格隔开，两个数字之间用/隔开*/

三七yiii

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS知识点01

一.CSS是什么？层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML等文件样式的计算机语言。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。CSS的优点：使HTML专注于网页的内容，CSS专注于网页的表现提供了丰富的格式化功能可以针对各种可视化浏览器（主要有显示器、打印机、PDA等）来设置不同的样式二、CSS引入方式1.行内样式...
复制链接

扫一扫