CSS 知识点总结

最新推荐文章于 2024-07-23 21:29:19 发布

ch_zs

最新推荐文章于 2024-07-23 21:29:19 发布

阅读量170

点赞数

分类专栏：网页知识点文章标签： html css

本文链接：https://blog.csdn.net/qq_43665891/article/details/104492332

版权

网页知识点专栏收录该内容

4 篇文章 0 订阅

订阅专栏

内容 :

一 CSS介绍

问题1: 什么是CSS?

CSS :一句话概括：css专门负责网页的外观表现！
html：专门负责网页的内容和层次结构。
js：专门负责网页的行为（可操作性的东西）

问题2: CSS能做什么?

通过css，可以让html网页的表现设定更加统一和便捷；
通过css，可以将html网页的内容代码，和需要表现的外观代码进行分离。【结构与样式分离】

二 CSS样式分类

css代码的语法虽然非常简单，但根据其代码可以出现的位置，可以将css分为3种类型：内联样式，外联样式，行内样式

行内样式:

内样式,行间样式
通过标签的style属性设置元素的样式

语法格式:

<标签名 style = 属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标签名>

任何HTML标签都有style属性,用来设置行内式

内嵌样式:

将CSS代码放到html页面中设置
在head标签中

语法格式:

<head>
	<meta charset="UTF-8">
	<title>网页</title>
	<style type="text/css">
		css代码

	</style>
</head>

外联样式:

一个文css文件,通过一个标签引入到需要的html页面中
通过link标签引入css文件,写在head标签中

语法格式:

<head>
	<meta charset="UTF-8">
	<title>网页</title>
	<link rel="stylesheet" type="text/css" href="1.css">
</head>

三种样式优缺点总结图:

在这里插入图片描述

CSS常用属性:

属性名	作用
color	文字颜色(前景色)
font-size	文字大小[px]
font-family	字体(黑体,宋体…)
font-style	正事还是斜体(italic)
font-weight	是否粗体
background	背景色
border	边框
text-decoration	underline下划线，line-through中划线，overline上划线，none不设置
text-align:	对齐方式(左中右)
line-height	行高
width	宽
height	高

简单选择器总结图:

在这里插入图片描述

四 CSS特性

层叠性 , 继承性 , 优先性

层叠性

所谓层叠性，是指对同一元素同一属性的设定，后设定的某个样式（属性），会覆盖之前设定的样式。

两个相同的选择器，设置了同样的属性，后者覆盖前者——层叠性体现之一。
，两个不同但同级优先性的选择器，设置了同样的属性，也是后者覆盖前者——体现之二。

继承性

所谓继承性，是指对某个元素所设定的样式，不但影响该元素本身，还可能影响该元素的后代元素。

.cc1{color:red;}
	<div  class=”cc1”>
	文字1
	<p>文字2</p>
	</div>
则此时文字1和文字2实际都是红色。

实际上继承性不是普遍情况，而只是少数一些属性才具有继承性（即能够影响后代元素）。
应用中继承性通常用在有关文字的属性上。

优先性

所谓优先级，就是指一个标签的显示效果（样式表现），可能受若干个因素的影响，但哪一个因素的影响大，则最终效果就按该因素的设定，也就是“更优先”的意思。

#pro{ font-size: 20px; }
.ppp{ font-size: 18px; }
<div  id=”pro”  class=”ppp”> 小米Note 4 </div>
则此时该文字的大小实际是20px。

伪元素选择器 > !important¹ > 行内样式 > id选择器 > 类选择器（或伪类选择器） > 元素选择器 > * > 继承样式 > 浏览器默认样式
其中，伪元素选择器又有： ::first-letter > ::selection > ::first-line

五有关文字的属性

字体属性是用来设定“文字字形”的外观表现，主要包括：

颜色，字体名称，大小，是否斜体（字体样式），是否粗体。
color， font-family， font-size， font-style , font-weight
font综合属性的语法：
```
font：[ <' font-style '> || <' font-weight '> ]? <' font-size '> [ / <' line-height '> ]? <' font-family '> ];
```

文本属性

text-align : 一段文字的对齐方式
text-decoration : 一段文字的"休息线"
text-indent : 设置一段文字的"首行缩进"的宽度(距离)
line-height : 文字的行高
letter-spacing :设置文字的字符间距
word-spacing : 设置文字的单词间距

…反正也没人看,太多了码不过来,有人催我在接着写吧…

一个属性,可以理解为强制优先 ↩︎

ch_zs

关注

0
点赞
踩
1

收藏

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

目录1 .CSS介绍2 .CSS样式分类3 .CSS语法和简单选择器4 .选择器详解5 .选择器组合6 .CSS特性7 .有关文字的属性内容 :一 CSS介绍问题1: 什么是CSS?CSS :一句话概括：css专门负责网页的外观表现！html：专门负责网页的内容和层次结构。js：专门负责网页的行为（可操作性的东西）问题2: CSS能做什么?通过css，可以让...
复制链接

扫一扫