首页 > 其他分享 >11月7日css介绍、基本格式、样式、选择器

11月7日css介绍、基本格式、样式、选择器

时间：2023-11-08 19:22:54浏览次数：26  
标签：11 color 标签 代码 元素 样式 选择器 css

目录

1.css介绍

css就是用来调整html的样式，它的专业名称层叠样式表。也可以这么理解css就是定义如何显示HTML元素。

2.css基本格式

每个css样式由两个部分组成：选择器和声明。声明又包含属性和属性值。每个声明之后用分号结束

可以这么理解把选择器当做一个人，声明就是给这个人添加什么，比如衣服（什么颜色的衣服），肉（那个部位的）什么的。

选择器{
    属性1：值;
    属性2：值;
}

3.css的几种引入方式

css的引入方式分为行内样式，内部样式，外部样式。

1.行内样式

行内样式是在标记的style属性中设定css样式。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--行内样式-->
<div style="width: 110px;height: 20px;background-color: hotpink"></div>
</body>
</html>

2.内部样式

嵌入式是将css样式集中写在网页的 < head>< /head>标签对的< style>< /style>标签中。

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <!--内部样式-->
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #a{
            width:10px;
            height:20px;
            background-color: lightpink;
        }
    </style>
</head>
<body>
<div id="a"></div>
</body>
</html>

3.外部样式

外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

例子：

先生成一个叫color的css文件代码如下

#a{
    background-color: blue;height:100px; width:100px;color: aqua;
}

然后就是html的文件代码如下：

<!--外部样式-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="color.css" type="text/css">
</head>
<body>
<p id="a">hello</p>
</body>
</html>

在html代码中给段落标签p的id赋值给a与css里面的样式互相对应

效果如图

css选择器

基本选择器

基本选择器共有：元素选择器、id选择器、类选择器、通用选择器

1.元素（标签）选择器

语法：标签名{属性：属性值；}

说明：标签选择器就是使用结构中元素名称直接作为选择符。

代码如下

p {color: "red";}

这里来上实例

<!--元素选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素选择器</title>
    <style>
        p{
            background-color: red;height: 100px;width: 100px
        }
    </style>
</head>
<body>
<p>hello</p>
</body>
</html>

效果如下

2.id选择器

语法：#id名{属性：属性值；}

说明：id选择器是使用元素身上的id属性作为选择符。所以想要使用id选择器，需要先为元素上定义id属性。

代码如下

<div id="box"></div>
#box { background-color: red; }

实例代码如下

<!--id选择器-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            background-color: red;
        }
    </style>
</head>

<body>
<div id="box">GGBOY</div>


</body>
</html>

效果如下

3.类选择器

语法：.class名{属性：属性值；}

说明：当我们使用类选择器时，需要先为相应的元素添加class属性。他的属性值就是我们要使用类名。

代码如下

<div class="box">GGBOY</div>
.box{background-color: red;}

实例代码如下

<!--类选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            background-color: red;
        }
    </style>
</head>

<body>
<div class="box">GGBOY</div>


</body>
</html>

效果如图

通用选择器

通用选择器，也叫初级选择器，通配符*

语法：*{属性：属性值；}

说明：*表示页面中所有的元素（标签），我们常用来重置样式。

基本代码如下：

* { color: red; }

例子代码如下

<!--通用选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            color: red;
        }
    </style>

</head>
<body>
<h1>3333</h1>
<p>4444</p>
<span>555</span>
</body>
</html>

这里用通用选择器将body里面的内容都变成红色。

效果如图

注意一下这个选择器适合用来重置使用。

组合选择器

组合选择器共有：后代选择器、子元素选择器、相邻兄弟选择器、弟弟选择器

1.后代选择器

选择指定元素内部所有符合条件的后代元素。后代选择器使用空格分隔选择器

这里以div块级标签为例将这个标签里面的p标签都进行修改

代码

div p {
  /* 选择 div 元素内部的所有 p 元素 */
}

实际例子代码如下

<!--后代选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div p{
      color: red;
    }
  </style>
</head>
<body>
<div>
  <p>第一个后代</p>
  <p>第二个后代</p>
  <p id="a">第三个后代</p>
  <h4>分支</h4><!--这里搞一个不一样的用于区分-->
</div>

</body>
</html>

实际效果

2.子元素选择器

选择指定元素的直接子元素。子元素选择器器使用>符号分隔选择器

假设要修改列表下所有li的元素就可以使用子元素选择器

代码

ul > li {
  /* 选择 ul 元素内部的直接子元素 li 元素 */
}

实例代码如下

<!--子元素选择器-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        ul>li{
            color:blue;
        }
    </style>
</head>
<body>

<ul type="circle">
    <li>第一子元素</li>
    <li>第二子元素</li>
    <li>第三子元素</li>
</ul>

</body>
</html>

效果如图

3.相邻兄弟选择器

选择与指定元素在同一层级且紧接在它后面的元素。相邻兄弟选择器使用+符号分隔选择器。

这里以h2和p标签为例

代码

h2 + p {
  /* 选择紧接在 h2 元素后面的 p 元素将此元素进行修改 */
}

实例代码如下


<!--相邻兄弟选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        h2 + p{
            color: mediumblue;
        }
    </style>
</head>
<body>
    <h2>不变</h2>
    <p>变</p>

</body>
</html>

效果如下

这个选择器的功能就是给被选择元素紧贴的元素进行修改。

通用兄弟选择器

选择与指定元素在同一层级的所有后续兄弟元素。通用兄弟选择器使用~符号分隔选择器

这里以h2和p为例子

代码

h2 ~ p {
  /* 选择所有与 h2 元素在同一层级的 p 元素 */
}

实例代码如下

<!--通用兄弟选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        h2~p{
            color: red;
        }
    </style>
</head>
<body>
<h2>66666</h2>
<p>55555</p>
<p>4444</p>
<p>333</p>
<p>22</p>
<p>1</p>
</body>
</html>

效果如图

然后有一个特殊的情况就是当添加class这个属性时的情况

代码如下

<!--通用兄弟选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        h2~.jun{
            color: red;
        }
    </style>
</head>
<body>
<h2>66666</h2>
<p class="jun">55555</p>
<p class="jun">4444</p>
<p class="jun">333</p>
<p class="jun">22</p>
<p>1</p>
</body>
</html>

这个代码里面有一个p的标签没有添加class属性，用于区分

效果如图

属性选择器

属性选择器是通过元素的属性以及属性值来选择对应元素的，属性名我们可以自己定义

语法：选择器[属性名]{属性：属性值；}

说明：只要选择器元素中有当前属性就会被选中。

这里将body里面的div都添加属性name

代码

div[name]{
    /* 将所有具有name属性的div标签 */
}

实例代码如下

<!--属性选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div[name]{
            color: mediumblue;
        }
    </style>
</head>
<body>
<div name="123">div</div>

<div name="456">div</div>

<div>没有name属性的div</div>
</body>
</html>

这个代码里面有一个div标签没有添加name的属性

效果如下

然后就是其它情况

1.只修改name为123的div标签

代码如下

<!--属性选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div[name="123"]{
            color: mediumblue;
        }
    </style>
</head>
<body>
<div name="123">div</div>

<div name="456">div</div>

<div>没有name属性的div</div>
</body>
</html>

这个代码里面只修改name属性值为123的div标签

效果如图

分组选择器

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式

代码

div, p {
    /* 将div和p标签样式给修改修改 */
}

实例代码如下

<!--分组选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div,p{
            color: mediumblue;
        }
    </style>
</head>

<body>
<div>123456</div>
<p>789101112</p>

</body>
</html>

效果如图

伪类选择器

伪类用于定义元素的特殊状态

例如，它可以用于：

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式

实例代码

/* 未访问的链接 */
a:link { color: #FF0000 }
/* 鼠标移动到链接上 */
a:hover { color: #FF00FF }
/* 选定的链接 */
a:active { color: #0000FF }
/* 已访问的链接 */
a:visited { color: #00FF00 }
/*input输入框获取焦点时样式*/
input:focus { outline: none; background-color: #eee; }

第一个实例给未访问的链接添加颜色

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{
            color: red;
        }
    </style>
</head>
<body>
<a href="伪类选择器.html">点击</a>
</body>
</html>

效果如图

但是如果这个网站被点开过就会无法修改颜色了。

第二个实例当鼠标移动到链接上有颜色变化

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:hover{color: greenyellow}
    </style>
</head>
<body>
<a href="伪类选择器.html">点击进入下一面</a>
</body>
</html>

效果如下

第三个实例选定的链接

就是在点击链接是瞬间变色

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:active{color: greenyellow}
    </style>
</head>
<body>
<a href="伪类选择器.html">点击进入下一面</a>
</body>
</html>

效果就无法展示了。

第四个实例给已访问的链接添加颜色

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:visited{color: blueviolet}
    </style>
</head>
<body>
<a href="伪类选择器.html">点击进入下一面</a>
</body>
</html>

效果如图

第五个实例input输入框获取焦点时样式

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        input:focus{
            background-color: blueviolet;
        }
    </style>
</head>
<body>

<input type="text">
</body>
</html>

效果如图

伪元素选择器

伪元素用于设置元素指定部分的样式。

1.first-letter

常用于给首字母设置特殊样式：

这里以p标签为例子

p:first-letter { font-size: 48px; color: red; }

实例代码

<!--first-letter-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        p:first-letter{font-size: 48px;color: blue}
    </style>
</head>
<body>
<p>supper</p>
</body>
</html>

效果如图

2.before

此元素用于给指定的标签前面插入内容

这里以p标签为例子

/*在每个<p>元素之前插入内容*/ p:before { content:"6666"; color:red; }

content是要被插入内容

实例代码

<!--before-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        p:before{content:"6666";color:red}
    </style>
</head>
<body>
<p>supper</p>
<p>sleep</p>
<p>eat</p>
</body>
</html>

效果如图

3.after

此元素用于给指定的标签后面插入内容

以p标签为例子

代码

/*在每个<p>元素之后插入内容*/ p:after { content:"？？？？"; color:blue; }

content是要被插入的内容

实例代码

<!--after-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        p:after{content:"6666";color:red}
    </style>
</head>
<body>
<p>supper</p>
<p>sleep</p>
<p>eat</p>
</body>
</html>

效果如图

注意点：before和after多用于清除浮动。

选择器的优先级

上面的很多选择器，在一个html页面中有很多种方式找到一个元素并且为其设置样式，那浏览器会根据不同选择器的权重来决定

如图

但是如果有的样式还是没有效果可以使用!important方式来强制让样式生效，但并不推荐使用。因为如果过多使用会造成样式文件混乱不易维护。

具体代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    p{
      color: blueviolet!important;
    }
  </style>
</head>
<body>
<p style="color: red">JUN&nbspWAN</p>
</body>
</html>

上面代码的情况是我给p的颜色先定义为红色，然后我用!important来强制将颜色变成紫色

效果如下

不到没办法的时候不要用这个。

CSS继承

继承是CSS的一个主要特征，它是依赖于后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了字体的颜色值也会应用到段落的文本中。

但是CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。

标签的嵌套

关于标签的嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

比如p标签不能包含块级标签，p标签也不能包含p标签。

标签：11,color,标签,代码,元素,样式,选择器,css
From： https://www.cnblogs.com/slzjb/p/17818109.html

相关文章

  • win11不能打开gpedit.msc
    创建文件test.cmd,然后把以下代码复制到此文件，然后用管理员身份运行就可以打开gpedit.msc@echooffpushd"%~dp0"dir/bC:\Windows\servicing\Packages\Microsoft-Windows-GroupPolicy-ClientExtensions-Package~3*.mum>List.txtdir/bC:\Windows\servicing\Packages\M......
  • 【2023.11.08】NOIP2023模拟试题-30
    前言数论迎我归，数学送我葬组合数学不容易，又有DP当T3刚爆零，T4又遭殃OI路上怅前望，且行且彷徨T1最大公约数T1应该想一想就会，接下来我们讨论是怎么减去他的复杂度的。题目的关键在于，如果根据给出的\(a\)推出\(\gcd\)的话，就会有\(9\times10^{10}\)条推导关系。而......
  • 2023_11_08_Idea常用的快捷键
    一、常用快捷键Ctrl+F12弹出当前文件结构层(类的方法属性等)，可以在弹出的层上直接输入，进行筛选Ctrl+左键单击在打开的文件标题上，弹出该文件路径Ctrl+N根据输入的类名查找类文件Ctrl+D复制光标所在行或复制选择内容，并把复制内容插入光标位置下面Ctrl+P方法......
  • 11.8读书笔记《需求掌握过程》02
    所谓需求，就是那些必须在开始进行产品构建前发现的东西，如果在构建的过程中才发现需求，或者更晚更糟，直至客户已经在使用产品的时候才发现需求，那么代价将会是很大的，效率也将十分低下。《掌握需求过程》这本书中，讲述了身为一个需求分析师，应完成的几个工作内容。按书中所说，分析师即......
  • 软件测试|Chrome 115之后的版本，如何更新driver？
    问题描述前两天在运行一个web自动化测试脚本时，报了如下的错误，ThisversionofChromeDriveronlysupportsChromeversion113Currentbrowserversionis115.0.5790.110withbinary，如下图所示：该报错提示我，当前的driver只支持113版本的Chrome浏览器，但是我的Chrome已经自动......
  • 今日总结11.8
    实验1熟悉常用的Linux操作和Hadoop操作1.实验目的Hadoop运行在Linux系统上，因此，需要学习实践一些常用的Linux命令。本实验旨在熟悉常用的Linux操作和Hadoop操作，为顺利开展后续其他实验奠定基础。2.实验平台（1）操作系统：Linux（建议Ubuntu16.04或Ubuntu18.04）；（2）Hadoop版本：3.1.3。3.......
  • 如何使用 GTX750 或 1050 显卡安装 CUDA11+
    前言    由于兼容性问题，使得我们若想用较新版本的PyTorch，通过GPU方式训练模型，也得更换较新版本得CUDA工具包。然而CUDA的版本又与电脑显卡的驱动程序版本关联，如果是低版本的显卡驱动程序安装CUDA11及以上肯定会失败。        比如GTX750Ti或GTX1050......
  • GEPCI-5565PIORC-110000反射内存卡
    反射内存实时网的特点VMIC反射内存是一种通过局域网在互连的计算机间提供的数据传输的技术，强实时网络设计人员已经越来越多地采用这种技术。VMIC反射内存实时局域网的概念十分简单，就是设计一种网络内存板，在分布系统中实现内存至内存的通信，并且没有软件开销。每台结点机上插一块反射......
  • 双11“万亿交易额”背后，浪潮信息助力银行扛住交易洪流
    双十一，不仅是网络购物的狂欢，更是中国支付清算业务的大考。举目望去，双十一的台前幕后可谓是“不一样的精彩”。一方面台前的主角是消费者，全球超200个国家和地区的人们捧着手机、电脑，在阿里、京东、抖音、拼多多等电商平台上拼秒杀、抢红包，通过“买买买”创造了超万亿元的交易额，带动......
  • 2023-11-08 Android studio下载的模拟器存放路径以及如何修改存放路径 ==》默认路径：C:
    模拟器存放默认路径：C:\Users\Administrator\.android\avd如何修改：设置一个系统变量，如图，点击Help==》EditCustomProperties 然后再弹出的文本框里输入你要存放的路径，比如我存在D盘的adv文件夹里面ANDROID_AVD_HOME=D:\\adv 我的as版本：2022.3.1Patch3 写到最后：c盘......

赞助商

阅读排行

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

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

Copyright © 2020-2023 IPS99 版权所有 IPS99