登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

豆瓜网 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›CSS2基础（part-1）

CSS2基础（part-1）

辖瑁地 2025-6-6 16:24:33
CSS2基础

基础

简介

【全称】Cascading Style Sheets，又名层叠样式表

  • 层叠：一层一层涂上去
  • 表：列表
  • 样式：如文字大小，颜色，元素宽高等。
CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。
语言类型

标记语言，为HTML结构美化样式，实现语义与效果的分离，更好地美化网页，优化网页结构
作用于HTML的方式

行内样式（不推荐）

语法：
  1. <body>
  2.     <h1 >title</h1>
  3. </body>
复制代码
缺点：

  • 工作量大，效率低下
  • html和css耦合性太高，css使html结构与样式分离的作用微乎其微
内部样式

语法：
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>内部样式</title>
  4.    
  5. </head>
  6. <body>
复制代码
优点：

  • 结构和样式已经初步分开，代码可以进行服用
缺点：

  • 需要复制到另一个html文件才可以实现样式复用，耗费时间
[!NOTE]
一开始写CSS样式的时候，可以使用内部样式，不用再开一个.css文件来赋予结构样式，
到后来熟练了可以使用外部样式，写在.css文件中
外部样式

语法：
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>外部样式表</title>
  4.     <link rel="stylesheet" href="../CSS/03.css">
  5.    
  6.    
  7. </head>
复制代码
  1. /*CSS文件*/
  2. h1{
  3.     color: skyblue;
  4. }
  5. h2{
  6.     color: gray;
  7. }
复制代码
最常使用的方式，实际开发几乎都使用外部样式表
优点：

  • 当第一次通过浏览器渲染后，CSS样式就会因为与.html文件的分离而进行缓存，下次渲染则可以提高访问速度
样式的优先级

顺序：
行内样式 > 内部样式 = 外部样式
attention

  • 遵循“后来者居上”的原则
  • 相当于涂鸦，涂了第二层，第一层就会看不见了
语法规范

结构：
选择器找到想要更改样式的元素声明块一个或多个声明（声明：[属性名： 属性值；]）
  1. h2{
  2.     color: gray;
  3. }
复制代码
代码风格

风格作用展开风格开发时推荐，便于维护和调试紧凑风格项目上线时推荐，可以减小文件体积，以节约网络流量，同时使打开网页的速度更快CSS选择器

基本选择器

通配选择器

作用：
选中所有的HTML元素（清除样式的时候有用）
  1. * {
  2.         color: red;
  3. }
复制代码
元素选择器

作用：
为某种元素统一设置，无法实现同类型的差异化
  1. 标签名 {
  2.     属性名: 属性值;
  3. }
复制代码
类选择器

作用：
通过元素中的class的属性值来进行可以自己分类的样式分配
元素中的class属性的属性值可以有多个，用空格隔开
class属性的属性值尽量为字母+数字，用-连接，避免纯数字的出现
  1. /*假设有一个元素h1，它的class属性的属性值为skyblue*/
  2. .skyblue {
  3.     color: skyblue;
  4. }
复制代码
ID选择器

作用：
选中唯一的元素通过id属性的属性值（其中的原理是不同的元素，id属性的属性值必须不同）
  1. /*假设有一个元素h1，它的id属性的属性值为special*/
  2. #special {
  3.     color: skyblue;
  4. }
复制代码
复合选择器

交集选择器

作用：
选中同时符合多个条件的元素
  1. 选择器1选2选3 {
  2.     color: skyblue;
  3. }
  4. /*比如p.blue 就是说class属性的属性值为blue的p标签（双重筛选）*/
复制代码
[!NOTE]

  • 有标签名必须写在前面
  • 不可能同时出现两个元素选择器
并集选择器

作用：
选中多个选择器对应的元素
  1. h2,
  2. h3,
  3. p {
  4.             font-size: large;
  5.         }
  6. /*
  7. 选择器1，
  8. 选择器2，
  9. 选择器3 {
  10. 属性名： 属性值；
  11. }
  13. */
复制代码


  • 一般竖着写
  • 集体声明，可以缩小样式表的体积
HTML元素之间的关系


  • 父元素
  • 子元素
  • 祖先元素（爸爸也算是祖先）
  • 后代元素（儿子也算是后代）
  • 兄弟元素
为后面的后代选择器等选择器做知识储备
后代选择器（id，类也可）

作用：
选中指定元素中，符合要求的后代元素
  1. <ul>
  2.         <li>l</li>
  3.         <li>o</li>
  4.         <li>v</li>
  5.         <li>e</li>
  6.         <li>
  7.             love
  8.         </li>
  9.         <li>
  10.             <ul>
  11.                 <li>1</li>
  12.             </ul>
  13.         </li>
  14.     </ul>
复制代码
[!TIP]

  • 最后选中的是后代，不包括祖先
  • 须符合html的嵌套要求  （可以跨代寻找）
  • 子代和孙子辈以及等等可以同时兼顾
子代选择器

作用：
选中指定元素中符合要求的子代元素
  1. 选1>选2>选3 {
  2. color： skyblue；
  3. }
  4. /*
  5. 选择器可以不从最外面开始找寻元素
  6. */
复制代码
兄弟选择器

作用：
选中指定元素后，符合条件的相邻兄弟元素
分类：
分类语法作用相邻选1+选2向下找同代，第一个如果是选2，则赋予样式通用选1~选2向下找通带，如果是选2，则赋予样式，可以不止一个
  1. <body>
  2.    
  3.         <ul>
  4.             <li>love</li>
  5.             <li>like</li>
  6.         </ul>
  7.         <ol>
  8.             <li>long</li>
  9.             <li>lonely</li>
  10.         </ol>
  11.         <p>paragrah</p>
  12.         <h3>title333</h3>
  13.         <h2>title2</h2>
  14.         <h3>title3</h3>
  15.         <h3>title33</h3>
  16. </body>
复制代码
属性选择器

作用：
选中属性值符合一定要求的元素
  1. /* 第一种写法，选中具有相同属性的元素 */
  2.         [title] {
  3.             color: skyblue;
  4.         }
  5.         /* 第二种写法，选中属性以及属性值都相同的元素 */
  6.         [title = "1"] {
  7.             color: aquamarine;
  8.         }
  9.         /* 第三种写法，选中属性相同，且属性值开头相同的元素 */
  10.         [title^="a"] {
  11.             color: yellow;
  12.         }
  13.         /* 第四种写法，选中属性相同，且属性值结尾相同的元素 */
  14.         [title$="e"] {
  15.             font-size: larger;
  16.         }
  17.         /* 第五种写法，选中属性相同，且属性值中包含部分值的元素 */
  18.         [title*="1"] {
  19.             color: brown;
  20.         }
复制代码
伪类选择器

概念解析：
不是真的类class，而是元素的一种状态
分类：
动态伪类意思结构伪类意思link（超链接独有）尚未连接first-child第一个孩子visted（超链接独有）连接过last-child最后一个孩子hover鼠标悬停nth-child（n）第n个孩子active元素激活（按下鼠标不松开）first-of-type第一个同类型孩子focus获取焦点（表单元素）last-of-type最后一个同类型孩子nth-of-type（n）第n个同类型孩子结构伪类补充

1.关于括号中的n

  • 0或不写：什么都不选
  • n：选中所有（几乎不用）
  • 1~正无穷：选中对应序号
  • 2n或even：选中序号为偶数
  • 2n+1或odd：选中序号为奇数
  • -n+3：选中前三个
原理：an + b
2.细节：
类似于立嫡立长，即取第一个儿子，孙子...(同时)
例子：
div p:first-child
意思是找div中的第一个儿子，孙子...是不是p，是就赋予样式
p:first-child
意思是找body中的第一个儿子，孙子...是不是p，是就赋予样式
否定伪类

作用：
排除满足括号中条件的元素
语法：
:not(选择器)
  1. p:not(:first-child) {
  2.             color: skyblue;
  3.         }
复制代码
UI伪类

分类：
what意思checked被选中的复选框或单选框enable可用的表单元素disabled不可用的表单元素
  1. /* 选中的是被选中的复选框和单选框 */
  2.         input:checked {
  3.             width: 100px;
  4.             height: 100px;
  5.         }
  6.         /* 选中的是被禁用的input元素 */
  7.         input:disabled {
  8.             background-color: gray;
  9.         }
  10.         /* 选中的是可用的input元素 */
  11.         input:enabled {
  12.             background-color: skyblue;
  13.         }
复制代码
目标伪类（了解）

作用：
选中指定的锚点元素
  1. /* 选中锚点指向的元素 */
  2.         div:target{
  3.             background-color: gray;
  4.         }
复制代码
语言伪类（了解）

作用：
根据指定的语言选择元素
  1. div:lang(en) {
  2.             color: skyblue;
  3.         }
复制代码
伪元素选择器

作用：
选中元素中的一些特殊位置（在元素里）
分类：
what意思first-letter第一个文字first-line第一行文字selection被鼠标选中placeholder提示文字（输入框中）before最开始的位置创建子元素after最后的位置创建子元素
  1. /* 选中元素中的第一个文字 */
  2.         div::first-letter {
  3.             color:skyblue;
  4.         }
  5.         /* 选中元素中的第一行文字 */
  6.         div::first-line {
  7.             color: gray;
  8.         }
  9.         /* 选中的是鼠标选中的文字 */
  10.         div::selection {
  11.             color: red;
  12.             background-color: gainsboro;
  13.         }
  14.         /* 选中的是input元素中的提示文字 */
  15.         input::placeholder {
  16.             color:skyblue;
  17.         }
  18.         /* 在p元素一开始的位置，创建一个子元素 */
  19.         p::before {
  20.             content: "￥";
  21.         }
  22.         /* 在p元素最后的位置，创建一个子元素 */
  23.         p::after {
  24.             content: "millions";
  25.         }
复制代码
[!WARNING]
first-letter 和first-line内容若出现使用重叠，first-letter所使用的样式会覆盖first-line的样式
选择器优先级

原则：

  • 通过权重来区分到底哪个样式最优先
  • 行内样式和!important出现就不计较权重谁大谁小
细节呈现：
权重语法：（a，b，c）{a,b,c为个数}
aIDb类，伪类，属性c元素，为元素权重比较方式
一个一个进行比较，当a比出结果，权重就出结果，若没有，就接着往下让b进行比较，以此类推
[!IMPORTANT]
!important > 行内样式 > 一切权重
!important不到情急不可进行使用，因为这种做法会使工作的交接细节出现问题，
即使使用了，过后也需要删除，找到无法用权重方式使样式变更的原因，并解决
快捷方式：
只要将鼠标放在选择器上，则可以出现权重，无需计算
之前的讲解是为了了解其中的权重计算原理，而非只是表面的计算

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
CSS2基础part

使用道具 举报

相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
辖瑁地
2025-6-6 16:24:33

0

粉丝关注

17

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫