前端学习_css笔记（1）

最新推荐文章于 2023-03-28 20:31:34 发布

呆不萌小狼

最新推荐文章于 2023-03-28 20:31:34 发布

阅读量114

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/m0_47717596/article/details/116239380

版权

前端学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

前端学习_css笔记（1）

1. 外部样式表（外链式）

其基本语法格式如下：放在head头部标签中，href 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

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

2. CSS选择器

选择器分为基础选择器和复合选择

2. 1 CSS基础选择器

1）标签选择器

概念：

标签选择器（元素选择器）为页面中某一类标签指定统一的CSS样式。
语法：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

优缺点：

能快速为页面中同类型的标签统一样式，但不能设计差异化样式。

2）类选择器（.）

类选择器使用“.”进行标识，后紧跟类名.

语法：

类名选择器

.类名  {   
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3;     
}

标签

<p class='类名'></p>

优点：
- 可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签

3）类选择器- 多类名特殊用法

可以给标签指定多个类名，从而达到更多的选择目的。

注意：

各个类名中间用空格隔开。
多类名选择器在后期布局比较复杂的情况下，较多使用的。

<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>

4） id选择器（#）

id选择器使用#进行标识，后面紧跟id名

其基本语法格式如下：

id选择器

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签
```
<p id="id名"></p>
```

元素的id值是唯一的，只能对应于文档中某一个具体的元素。

5）通配符选择器

概念

通配符选择器用*号表示， * 选择所有的标签
其基本语法格式如下：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

注意：

会匹配页面所有的元素，降低页面响应速度，不建议随便使用

6）注意事项

尽量少用通用选择器及id选择器
不使用无具体语义定义的标签选择器 div span

2.2 css复合选择器

1）后代选择器（重点）

父级 子级{属性:属性值;属性:属性值;}

语法：

.class h3{color:red;font-size:16px;}

当标签发生嵌套时，内层标签就成为外层标签的后代。

2 ）子元素选择器

作用：

子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素。
其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接
语法：

.class>h3{color:red;font-size:14px;}

这里的子指的是亲儿子不包含孙子重孙子之类。

3）交集选择器

条件

交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。

比如：   p.one   选择的是： 类名为 .one  的 段落标签。

用的相对来说比较少，不太建议使用。

4）并集选择器（重点常用）

如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。并集选择器通常用于集体声明，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思。

比如  .one, p , #test {color: #F00;}  
表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。 
通常用于集体声明。

5）链接伪类选择器（重点）

伪类用冒号比如 :link{}

作用：

用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

因为伪类选择器很多，比如链接伪类，结构伪类等等。

a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 鼠标移动到链接上 */
a:active /* 选定的链接 */

注意

写的时候，顺序尽量不要颠倒按照 lvha 的顺序。否则可能引起错误。

3. 标签显示模式（display）

1）块级元素(block-level) 独占一行

例：

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点

（1）独占一行

（2）高度，宽度、外边距以及内边距都可以控制。

（3）宽度默认是容器（父级宽度）的100%

（4）是一个容器及盒子，里面可以放行内或者块级元素。

2）行内元素(inline-level) 一行多个

例：

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素

行内元素的特点：

（1）一行可以显示多个

（2）高、宽直接设置是无效的。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。

3）行内块元素（inline-block）

例：

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：

（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。

4）标签显示模式转换 display

块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;

4. CSS 三大特性

1）CSS层叠性后面调用的会覆盖前面调用的

概念：

浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
原则：
- 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。 后面调用的会覆盖前面调用的

2） CSS继承性

概念：

子标签会继承父标签的某些样式，如文本颜色和字号。

想要设置一个可继承的属性，只需将它应用于父元素即可。
注意：
- 恰当地使用继承可以简化代码，降低CSS样式的复杂性。
- 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

3） CSS优先级

概念：

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，
- 选择器相同，则执行层叠性
- 选择器不同，就会出现优先级的问题。

1). 权重计算公式

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）

标签选择器	计算权重公式
继承或者 *	0,0,0,0
每个元素（标签选择器）	0,0,0,1
每个类，伪类	0,0,1,0
每个ID	0,1,0,0
每个行内样式 style=""	1,0,0,0
每个!important 重要的	∞ 无穷大

值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

2). 权重叠加

我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。

就是一个简单的加法计算

div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1

注：数位之间没有进制比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，

3). 继承的权重是0

1）如果选中了，那么以上面的公式来计权重。谁大听谁的。
2）如果没有选中，那么权重是0，因为继承的权重为0.

呆不萌小狼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习_css笔记（1）

前端学习_css笔记（1）1. 外部样式表（外链式）其基本语法格式如下：放在head头部标签中，href 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。<head> <link rel="stylesheet" type="text/css" href="css文件路径"></head>2. CSS选择器选择器分为基础选择器和复合选择2. 1 CSS基础选择器1）标签选择器概念：标签选择器（元素选择器）为页面中某一类
复制链接

扫一扫