CSS笔记一

最新推荐文章于 2024-09-28 15:35:33 发布

没人取这个名字

最新推荐文章于 2024-09-28 15:35:33 发布

阅读量70

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_61696306/article/details/121023571

版权

1. CSS 简介

1.1 HTML的局限

HTML只关注内容语义，即只表现你所添加的元素，而不关注布局，可以用HTML进行简单设置，但太过繁琐

1.2 CSS

CSS是层叠样式表的简称

CSS也是一种标记语言

CSS主要用于设置HTML页面中的文本内容(字体，大小，对齐方式等)，图片外形(宽高，边框样式，边距等)以及版面的外观显示样式

1.3 CSS语法规范

CSS规则主要由两个主要部分构成：选择器以及一条或多条声明

选择器用于指定CSS样式的HTML标签，花括号内是该对象的具体样式
属性与属性值以键值对的形式出现
属性十一指定的样式设置的样式属性，例如字体大小、文本颜色等
属性与属性值之间用英文的":“分开,而设置不同属性间要用”;"分开

1.4 CSS代码风格

1.4.1样式格式书写

紧凑格式
```
 h3 { color:deeppink; font-size:20px;}
```
展开格式

h3 { 
	color:deeppink;
	font-size:20px;
}

第二种更方便

1.4.2样式大小写

推荐样式选择器，属性名，属性关键字全部用小写字母

1.4.3空格规范

属性值前面，冒号后面，保留一个空格
选择器(标签)和大括号中间保留空格

1.5 书写方法

方法一：（内部样式表）首先在<head>标签里写下<style>标签，将所有的CSS设置都放在<style>内

<head>
    <style>
     
    </style>
</head>

方法二：外部样式表

可以将CSS样式编写到一个外部的CSS文件中

然后通过link标签来引入外部的CSS标签中（可以加快网页加载速度，即第一次慢，后面快）

<link rel="stylesheet" href="">

href指定的样式表文件的位置;相关知识路径（参考HTML标签文章)

2.CSS基础选择器

2.1 CSS选择器的作用

选择器就是选择自己需求的标签

2.2选择器的分类

选择器分为基础选择器和复合选择器两个大类

**！**基础选择器是由单个选择器构成

**！**基础选择器又包括：标签（元素）选择器、类选择器、id选择器、和通配符选择器

2.3 基础选择器

2.3.1 标签（元素）选择器

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

标签名 {
	属性: 属性值
	属性: 属性值
	属性: 属性值
}

作用

标签选择器可以把某一类标签全部选择出来

优点

能迅速为页面中同类型的标签设置统一样式

缺点

不能设计差异化样式，只能选择全部的当前标签。

2.3.2 id选择器

作用：根据元素的id属性值选中一个元素

语法：#id属性值

例子：#box{}

2.3.3 类选择器

作用：可以根据class属性值选择一组元素

注意：class是一个标签的属性，它和类似，不同的是id不可以重复，而class可以重复使用，从而通过相同的class属性为元素分组

语法： .class属性值{}

“多个class值键可以使用空格键隔开，例如<h1 class="blue abc">我是标题</h1>”

2.3.4 通配选择器

作用：选中页面中的所有元素

语法：*{ }

2.4 复合选择器

2.4.1 交集选择器

作用：同时选中符合多个条件的元素

语法：选择器1选择器2选择器3

注意：交集选择器中如果有元素选择器，必须使用元素选择器开头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.red{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="red">我是div</div>
    <p class="red">我是p</p>
</body>
</html>

2.4.2 并集选择器

作用：同时选择多个元素进行相同操作

语法：选择器1,选择器2,选择器3{}

2.5 关系选择器

<div>
    <p>
        
        <span></span>
    </p>
    <span></span>
</div>

即标签间的包含和并列关系

一：

语法：标签>被直接包含的标签（可以连续写）

例如：div>span{}只会选中被直接包含的那一个span标签

二：

语法：标签被包含的标签

例如 div span{}会选中被包含在div标签里面的所有span标签

三：

语法：标签+并列的标签(或者标签~并列的标签)

作用：+代表找下一个并列标签，且标签名应与加号后面的标签名相同，~代表找标签后面所有并列标签中的目标标签

2.6 属性选择器

语法:

1.[属性名]{} 选择含有指定属性的元素

2.[属性名=属性值]{} 选择含有指定属性和属性值的元素

3.[属性名^=属性值]{} 选择属性值以指定值开头的元素

4.[属性名$=属性值]{} 选择属性值以指定值开头的元素

5.[属性名*=属性值]{} 选择属性值中包含指定值的元素

p[title]{}
p[title=abc]{}
p[title^=abc]{}

2.7 伪类选择器

伪类（不存在的类，特殊的类）

伪类用来描述一个元素的特殊状态。比如：第一个子元素，被点击的元素，鼠标移入的元素…

伪类标签总以:开头

例如 :first-child

:last-child

:nth-child(n)选中第n个元素

特殊值：

n 选中全部元素

2n 选中偶数位的元素

2n-1 选中奇数位的元素

 ul>li:first-child{}



<ul>
    <li>h 	</li>
    <li>g	</li>
    <li>f	</li>
    <li>d	</li>
    <li>s	</li>
    
</ul>

注意伪类是根据所有子元素进行排序，例如如果在第一个<li>前加上一个<span>,则ul>li:first-child{}不起作用，因为此时的第一个标签不是<li>

可以使用

:first-of-type{}

:last-of-type{}

:nth-of-type(n)

表示在同类元素内排序

:not() 否定伪类，将所有符合条件的元素从选择器中出去，在括号内写选择器

 ul>li:not(:nth-of-type(n)){}

<!--表示除了第三个li元素，其他li元素都进行某种处理-->
<ul>
    <li>h 	</li>
    <li>g	</li>
    <li>f	</li>
    <li>d	</li>
    <li>s	</li>
    
</ul>

注意：a元素伪类（超链接伪类）

链接的两种状态：

没有访问过的链接
访问过的链接

伪类 :link 用来表示没访问的链接(正常的链接)

:visited 用来表示访问过的链接

出于隐私的原因，所以visited这个伪类只能修改链接颜色

a:link{
	color:red;
}
a:visited{
	color:red;
}

注意：鼠标移入

:hover 用来表示鼠标移入效果（不只是运用于超链接）

:active 表示鼠标点击的状态

语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:hover{
            color:yellow
        }
        a:active{
            color:red;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">baidu</a>
</body>
</html>

2.8 伪元素选择器

举个例子，看报纸时有些文章会在段首第一个字母放大

伪元素：表示页面上一些特殊的不是真实存在的某个元素（特殊的位置）

伪元素总以 :: 开头

p::first-letter (第一个字母)

p::first-line (第一行)

p::selection （表示所选中的内容）

元素::before{} (在元素前添加东西)

注意：用before 添加时要使用content

例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p::before{
            content:"abd"
            color:"red"
        }
    </style>
</head>
<body>
   <p>
      leoufi shdfi sufuebae snfiueeiwfu scieu 
   </p>
</body>
</html>