首页 > 其他分享 >40.CSS基础与选择器

40.CSS基础与选择器

时间：2024-06-12 20:13:46浏览次数：17  
标签：CSS3 color 标签 元素 40 选择器 CSS 属性

【一】css基础

1）概念

  • 就是给HTML标签添加样式的

2）注释语法

/*注释*/

3）语法结构

选择符 {
    样式属性: 样式属性值;
    样式属性: 样式属性值;
    样式属性: 样式属性值, 样式属性值, 样式属性值;
}

4）三种引入

1.styble标签内部直接使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--方式一-->
    <style>
        #x {color: goldenrod}
    </style>
</head>
<body>
    <h1 id="x">一级标签</h1>
</body>
</html>

2.直接在标签定义一个style标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--方式二-->
    <h1 style="color: goldenrod">一级标签</h1>
</body>
</html>

3.通过link标签引入css文件

/*CSS*/
x{color:goldenrod}

<!--html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--方式三-->
    <link rel="stylesheet" href="css文件名">
</head>
<body>
    <h1 style="color: goldenrod">一级标签</h1>
</body>
</html>

【二】CSS的选择器

1）基本选择器

1.id选择器

  • 通过元素的id属性进行选择
  • 每个页面的id都是唯一的，最好在CSS中不要重复使用

# + id属性值 + {css属性名:css属性值}

<h1 id="x">Hello, World!</h1>
#x{color: firebrick;}

2.类选择器

  • 通过元素的class属性进行选择
  • 多个元素可共享一个class，其为应用样式的最佳方式

. + 类属性值 + {css属性名:css属性值}

<h1 class="title">Hello, World!</h1>
.title {color: fuchsia}

3.元素/标签选择器

  • 通过元素的标签名进行选取

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

<span>元素/标签选择器</span>
span {color: darkgrey}

4.通用选择器

  • *表示所有元素

* + {css属性名:css属性值}

<h6 >通用选择器1</h6>
<h6 >通用选择器2</h6>
*{color: cyan}

2）关系选择器

选择器 名称 版本 描述
E F 包含选择器 CSS1 选择所有低于E级别的F
E>F 子选择器 CSS2 只选择属于E下一级别的F
E+F 相邻选择器 CSS2 只选择一个与E同级别，在E之后且相邻的F
E~F 兄弟选择器 CSS3 选择与E同级别的所有F 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div下的所有span标签*/
        div span {color: fuchsia}
        /*仅div下一级的span*/
        div > span {color: aqua}
        /*div同级的邻近的span*/
        div + span {color: darkcyan}
        /*div同级的所有span*/
        div ~ span {color: darkgreen}
    </style>
</head>
<body>
<div>div标签
    <p>div下的第一个p标签</p>
    <p>div下的第二个p标签
        <span>diva下p内的span标签</span>
    </p>
    <span>div下的第一个span标签</span>
    <span>div下的第二个span标签</span>
</div>
<span>第一个span标签</span>
<span>第二个span标签</span>

</body>
</html>

3）属性选择器

选择器 版本 描述
E[att] CSS2 选择具有att属性的E元素。
E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素。
E[att~="val"] CSS2 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
E[att^="val"] CSS3 选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$="val"] CSS3 选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*="val"] CSS3 选择具有att属性且属性值为包含val的字符串的E元素。
E[att|="val"] CSS2 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*所有带有XXX属性的元素*/
        [XXX] {color: blue}
        /*所有带有XXX且值为'ST1'属性的元素*/
        [XXX='ST1'] {color: cornflowerblue }
        /*所有带有XXX且值为'ST1'属性的p元素*/
        p[XXX='ST1'] {color: darkviolet}
    </style>
</head>
<body>

<input type="text" XXX>
<input type="text" XXX="ST1">
<input type="text" XXX="ST2">
<p XXX="ST1">p标签 ST1</p>
<div XXX="ST1">div标签 ST1</div>

</body>
</html>

4）伪类选择器

选择符 版本 描述
E:link CSS1 设置超链接a在未被访问前的样式。
E:visited CSS1 设置超链接a在其链接地址已被访问过时的样式。
E:hover CSS1/2 设置元素在其鼠标悬停时的样式。
E:active CSS1/2 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
E:focus CSS1/2 设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。
E:lang(fr) CSS2 匹配使用特殊语言的E元素。
E:not(s) CSS3 匹配不含有s选择符的元素E。
E:root CSS3 匹配E元素在文档的根元素。
E:first-child CSS2 匹配父元素的第一个子元素E。
E:last-child CSS3 匹配父元素的最后一个子元素E。
E:only-child CSS3 匹配父元素仅有的一个子元素E。
E:nth-child(n) CSS3 匹配父元素的第n个子元素E。
E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
E:first-of-type CSS3 匹配父元素下第一个类型为E的子元素。
E:last-of-type CSS3 匹配父元素下的所有E子元素中的倒数第一个。
E:only-of-type CSS3 匹配父元素的所有子元素中唯一的那个子元素E。
E:nth-of-type(n) CSS3 匹配父元素的第n个子元素E。
E:nth-last-of-type(n) CSS3 匹配父元素的倒数第n个子元素E。
E:empty CSS3 匹配没有任何子元素（包括text节点）的元素E。
E:checked CSS3 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
E:enabled CSS3 匹配用户界面上处于可用状态的元素E。
E:disabled CSS3 匹配用户界面上处于禁用状态的元素E。
E:target CSS3 匹配相关URL指向的E元素。
@page:first CSS2 设置页面容器第一页使用的样式。仅用于@page规则
@page:left CSS2 设置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则
@page:right CSS2 设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*输入框被选中时变色*/
        input:focus{background-color: lightslategrey}
        /*常态*/
        a:link{color: mistyrose}
        /*访问之后修改颜色*/
        a:visited {color: springgreen}
        p:visited {color: springgreen}
        /*鼠标悬停在上方时变色*/
        a:hover{color: darkorange}
        p:hover{color: darkorange}
        /*鼠标点击时改颜色*/
        a:active{color: darkturquoise}
        p:active{color: darkturquoise}
    </style>
</head>
<body>

<p><a href="https://www.xxx.com/" target="_blank">不存在的网页</a></p>
<p>text <input type="text"></p>
<p>p标签</p>
</body>
</html>

5）伪元素选择器

选择符 版本 描述
E:first-letter/E::first-letter CSS1/3 设置对象内的第一个字符的样式。
E:first-line/E::first-line CSS1/3 设置对象内的第一行的样式。
E:before/E::before CSS2/3 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E:after/E::after CSS2/3 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E::placeholder CSS3 设置对象文字占位符的样式。
E::selection CSS3 设置对象被选择时的颜色。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*开头第一个文件加效果*/
    p:first-letter{color: deepskyblue}
    /*文本开头添加内容*/
    p:before{content: '开头';color: darkgoldenrod }
    /*文本结尾添加内容*/
    p:after{content: '结尾';color: greenyellow }

  </style>
</head>
<body>

<p>p标签</p>

</body>
</html>

6）分组与嵌套

1.分组

div,p{color:red}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
		div,p{color:red}
    </style>
</head>
<body>

<div>第一个div标签</div>
<div id='i1'>第二个div标签</div>
<div class='c1'>第二个div标签</div>
<p>第一个a标签</p>
<span>第一个span标签</span>

</body>
</html>

2.嵌套

#i1,.c1{color:red}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
		#i1,p.c1{color:red}
    </style>
</head>
<body>

<div id='i1'>第二个div标签</div>
<div class='c1'>第二个div标签</div>
<p class='c1'>第一个p标签</p>
<span class='c1'>第一个span标签</span>

</body>
</html>

7）选择器优先级（从高到低）

  • !important
  • style 行内标签样式
  • id 选择器
  • class 选择器
  • 标签选择器
  • 通用选择器

标签：CSS3,color,标签,元素,40,选择器,CSS,属性
From： https://www.cnblogs.com/Mist-/p/18244615

相关文章

  • 42.CSS之盒子模型和浮动
    CSS之盒子模型和浮动【一】盒子模型1.概念是指网页设计中，用于描述和布局元素的一种模型2.组成部分内容区域盒子的实际内容，如文本、图像内边距内容区域与边框之间的空间，用于控制内容与边框之间的距离边框围绕内容区域与内边距的线条，用于给元素添加外观和样式......
  • 41.CSS属性
    【一】CSS属性1）长度和宽度属性版本继承性描述widthCSS1无定义了元素内容区（ContentArea）的宽度min-widthCSS2无定义了元素内容区（ContentArea）的最小宽度max-widthCSS2无定义了元素内容区（ContentArea）的最大宽度heightCSS1无定义了元素内容区（Cont......
  • 202406-如何使用新版本的rclone在服务器上挂载onedrive e5
    前情提要：这位老哥里面写的教程，因为rclone更新了所以有点不一样了，仅作记录在本地（带浏览器）操作Noremotesfound,makeanewone?n)Newremotes)Setconfigurationpasswordq)Quitconfign/s/q>nEnternamefornewremote.name>odOptionStorage.Typeofstorage......
  • 代码随想录算法训练营第三十六天 | 406.根据身高重建队列
    406.根据身高重建队列题目链接文章讲解视频讲解思路：  先按照身高由大到小排序，如果身高相同，比较人数（由小到大）；  按照人数重构数组，将节点插入到合适的位置classSolution{private:staticboolcompareByK(vector<int>&lhs,vector<int>&rhs){if(lhs[......
  • Tailwind CSS 实战指南：快速构建响应式网页设计
    title:TailwindCSS实战指南：快速构建响应式网页设计date:2024/6/12updated:2024/6/12author:cmdragonexcerpt:这篇文章介绍了TailwindCSS框架的特点与优势，包括其作为实用性的CSS框架如何通过预设的样式类实现快速布局和设计，以及如何在不牺牲响应式和自适应性的同时......
  • Arria 10 GX现场可编程门阵列10AX115N1F40I1SG、10AX115R2F40I2SG、10AX115R2F40I1SG
    Arria®10器件系列包括高性能，低功耗的20nm中端FPGA和SoC。Arria®10器件系列实现了：比上一代中高端FPGA更高的性能。通过一套综合节能技术来降低功耗。Arria®10器件专为各领域中高性能、功耗敏感的中端应用而设计。与竞争对手相比，利用公开的OpenCore设计，Arria®10F......
  • BUUCTF 40~45 wp
    40base64清晰明了的主函数initbasekeypy写脚本41oruga关键函数判断为迷宫，接下来找迷宫这个就是迷宫，可得出唯一路线42universefinalanwser主函数关键函数，z3求解之后打开linux虚拟机输入得到flag43老八unity软件，使用c#编程，用dnspy打开，关键注入是Assembl......
  • 即时通讯技术文集（第40期）：推送技术合集(Part2) [共18篇]
    为了更好地分类阅读52im.net总计1000多篇精编文章，我将在每周三推送新的一期技术文集，本次是第 40 期。[- 1 -] 一个基于长连接的安全可扩展的订阅/推送服务实现思路[链接] http://www.52im.net/thread-776-1-1.html[摘要] 本文将从如何保证连接的业务安全（禁止非业务......
  • CSS 遮罩层
    html<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="basic.css"></head><body><divclass="masked-element"><divclass="content">这里是需要遮罩的内容</div>......
  • 20_CSS_ 字体大小
    上面的代码还涉及继承与优先级的内容，不懂得可以参照：16_CSS_选择器的优先级_简单聊18_CSS_CSS三大特性这里简单说一下，为什么在不设置字体大小的情况下，使用不同浏览器打开时，显示的字体大小不一样：因为不同浏览器默认字体大小不一样。当设置字体小于浏览器默认字体大小或者不......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99