CSS知识点总结＜1＞

最新推荐文章于 2022-07-29 23:59:40 发布

yookooi

最新推荐文章于 2022-07-29 23:59:40 发布

阅读量414

点赞数 3

本文链接：https://blog.csdn.net/qq_45870314/article/details/123229330

版权

sjn 同时被 3 个专栏收录

19 篇文章 1 订阅

订阅专栏

html

15 篇文章 0 订阅

订阅专栏

css

12 篇文章 0 订阅

订阅专栏

一、css

1.css是什么？

CSS(Cascading Style Sheets)，层叠样式表。

2.css的优点

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

3.注释方式

html：使用  表示（快捷键为crtl+？）

	<!-- 这是一条注释 -->

css：使用/*注释内容*/表示

/* 这是一条注释 */

二、css的引入方式

1.行内样式

（1）行内样式直接在开始标签上加style属性来控制样式

（2）<div style="color:red;">内容</div>

（3）实例
<div style="color:red;">啦啦啦啦啦啦</div>
<p style="width:50px">内容</p>

2.内嵌式

（1）内嵌式即把所有的样式都写到一个<style></style>内部，该标签放<head></head>内部

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

（3）实例
<style type="text/css">
		   div{
				background-color: red;
			}
</style>

3.外链式

（1）外链式是把所有的样式都写到一个单独的css文件里（文件后缀是 .css）

（2）<link rel="stylesheet" href="css文件路径">

（3）实例
<link rel="stylesheet" type="text/css" href="01.css"/>

4.导入式

（1）使用import导入css的样式表

（2）@import url（"css文件"）或 @import "css文件"

（3）实例
<style type="text/css">
  @import url("css文件路径");
</style>
（4）tips：该引用方式基本不使用，因为页面会先加载html，然后再去加载css，这样就会造成页面样式的延迟。

5.link和@import导入外部样式的区别

（1）link属于XHTML标签，link标签除了可以加载css外，还可以定义RSS、定义rel连接属性等； @import完全是CSS提供的一种方式；

（2）输入方式不同；

（3）加载顺序不同；link优先加载CSS文件到页面，@import先加载HTML结构，再加载CSS文件；

三、选择器

1.标签选择器

（1）基本格式

标签名{
样式属性名 : 属性值 ;
...
}

（2）实例

div{
	background-color: #00BFFF;
	}

2.id选择器

（1）基本格式

#id值{
样式属性名 : 属性值 ;
...
}

（2）实例

#tomo{
	background-color: green;
	
     }

3.类选择器

（1）基本格式

.类名{
样式属性名 : 属性值 ;
...
}

（2）实例

.cctt{
	background-color: orange;
      }

4.包含选择器

（1）基本格式

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

（2）实例

body div #txt{
	background-color: orange;
              }

5.权重相关问题

默认标签选择器的权重为1；类选择器的权重为10；id选择器的权重为100；包含选择器的权重为内部各类选择器权重之和。

权重越大，优先级越高。

四、字体单位

1.px：像素

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

浏览器默认字体大小为16px

2.em

以当前字符的高度为基准

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

五、颜色表达

1.直接表示

直接使用颜色的英文单词，如red
tips：很多浏览器不支持颜色的单词表示

2.三色值表示

（1）使用三色的数值，如rgb(120,222,100)
tips：数值在0~255之间

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

（3）使用三色数值的十六进制，如#0000ff

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

六、字体相关样式

1.font-family 字体系列

设置多个字体时，多个字体间用逗号隔开
如果设置的字体名字里有空格的，用引号引起来

font-family: "宋体","times new roman";/* 中文为宋体样式，英文为新罗马样式 */

2.font-size 字体大小

font-size: 20px;/* 用px表示 */
font-size: 1.25em;/* 用em表示 */

tips：em是个相对单位，如果当前字体的高度为12px，那么1em就是12px
一般以font-size为准，如果没有定义font-size，则以浏览器默认大小（16px）为准

3.font-style 字体样式

（1）normal 不倾斜，正常

（2）italic 斜体

（3）oblique 倾斜
font-style: italic;/* 斜体 */
font-style:normal;/* 正常不倾斜 */
font-style:oblique;/* 倾斜 */

4.font-weight 字体粗细

（1）normal：正常不加粗

（2）bold：粗体

（3）bolder：加粗效果

（4）lighter：细体

（5）100-900数值：100-300表现为细体；400-500表现为正常不加粗；600-900表现为加粗字体。
	font-weight: normal;/* 正常不加粗 */
	font-weight: bold;/* 粗体 */
	font-weight: bolder;/* 加粗效果 */
	font-weight: lighter;/* 细体 */
	font-weight: 100;/* 100-300表现为细体 ；400-500表现为正常不加粗；600-900表现为加粗字体。 */

5.line-height 行高

（1）行高的表示方法

①数值+单位

②数值（无单位）表示字体大小的倍数

line-height: 20px;/* 用数值+单位表示 */
line-height: 2;/* 直接用数值表示 */

（2）缩写

顺序： font-style值 font-weight值 font-size值 / line-height值 font-family值 ;

两个有单位的数值之间用/连接，其余用空格。

font:  italic bold 50px/5 "microsoft yahei","times new roman";

yookooi

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
CSS知识点总结＜1＞

一、css1.css是什么？CSS(Cascading Style Sheets)，层叠样式表。2.css的优点（1）使html专注于网页的内容，css专注于网页的表现（2）提供了丰富的格式化功能（3）可以针对各种可视化浏览器（主要有显示器、打印机、pda等）来设置不同的样式二、css的引入方式1.行内样式<div style="color:red;">内容</div>2.内嵌式 <style type="...
复制链接

扫一扫