web CSS笔记1

CSS(Cascading Style Sheets) 美化样式

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

引入CSS样式表（书写位置）

1、内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        /* 选择器{

            属性名:属性值;

            属性名:属性值;

        } */

        div {

            width: 300px;

            height: 300px;

            background-color: pink;

        }

    </style>

</head>

2、行内式（内联样式）

 是通过标签的style属性来设置元素的样式

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

3、外部样式表（外链式）

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中

 <head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

一个CSS文件可以什么都不写，引用其他CSS文件 

@import url（xxx.css的路径）

选择器

1、类选择器（基本选择器）

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

 标签调用的时候用 class=“类名”  即可。

<!DOCTYPE html><head><meta charset="UTF-8"><title>Document</title><style>.box1 {width: 100px;height: 100px;background-color: pink;}</style></head><body><div class="box1">1111</div></body></html>

2、标签选择器（基本选择器）

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

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

<!DOCTYPE html><head><meta charset="UTF-8"><title>Document</title><style>div{height: 100px;background-color: pink;}</style></head><body><div >1111</div></body></html>

3、ID选择器（基本选择器）

1、id选择器使用“#”进行标识，后面紧跟id名。

2、id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

3、W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

4、区别：

        类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜

        id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。

<!DOCTYPE html><head><meta charset="UTF-8"><title>Document</title><style>#box{width: 100px;background-color: pink;}</style></head><body><div id=”box“>1111</div></body></html>

4、通配符选择器（基本选择器）

选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

例如：如下表示设置HTML默认所有字体颜色为白色。

  <style>*{color：white；}</style>

5、子代选择器(包含选择器)

子元素选择器只能选择某元的子元素。

<!DOCTYPE html><head><meta charset="UTF-8"><title>Document</title><style>.a>li {color: red;}</style></head><body><ul class="a"><li>你是亲儿子</li><li>我是一个li</li><ul><li>后代</li></ul></ul></body></html>

6、后代选择器(包含选择器)

后代选择器用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

/* 后代选择器  找到所有后代中满足的标签*/

<!DOCTYPE html><head><meta charset="UTF-8"><title>Document</title><style>a li{color: red;}</style></head><body><ul class="a"><li>你是亲儿子</li><li>我是一个li</li><li>我是一个li</li><li>我是一个li</li><ul><li>后代  <b><li>后代</li></b> </li></ul></ul></body></html>

7、逗号选择器(并集选择器)(包含选择器)

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

<!DOCTYPE html><head><meta charset="UTF-8"><title>Document</title><style>.one, p , #t {color: #F00;font-weight: 700;}</style></head><body><div class="one">佳人们这是类选择器</div><br><span id="t">佳人们这是id选择器</span><br><p>佳人们这是标签选择器</p></body></html>

7.1交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。  

交集选择器 是 并且的意思。 即...又...的意思

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

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

8、属性选择器

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>/*  */input[type="password"] {background-color: aqua;}/* 具有某个属性的指定标签 */div[title] {background-color: pink;}/* 属性的值中包含某个值 */input[type*="e"] {background-color: blueviolet;}/* 属性值以什么开头 */input[type^="p"] {background-color: brown;}/* 属性值以什么结尾 */input[type$="t"] {background-color: red;}/* +表示的是下一个标签 */.box1+p {background-color: blue;}</style>
</head><body><div title="njdcndc">你是一个盒子</div><div>你是一个da盒子</div><input type="text"><input type="password"><input type="email"><div class="box1">ncjdncjd</div><p>mckdckd</p><p>mckdckd</p>
</body>
</html>

9、伪类选择器 ：描述标签的状态的

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>/* 访问前 */a:link {color: red;}/* 访问后 */a:visited {color: chartreuse;}/* 鼠标悬停时 */a:hover {color: pink;}/* 鼠标点击时 */a:active {color: darkblue;}/* 需要按照lvha的顺序书写 */</style>
</head><body><a href="#">这是一个链接</a></body>
</html>

9、1：其他伪类选择器

假如想要选择ul标签下的第2个li标签，该如何使用选择器呢？

那么第一个和最后一个呢？第奇或偶个这样的排序可以吗？

<body>

    <ul>

        <li>我是一个li1</li>

        <li>我是一个li2</li>

        <li>我是一个li3</li>

        <li>我是一个li4</li>

        <li>我是一个li5</li>

        <li>我是一个li6</li>

        <li>我是一个li7</li>

        <li>我是一个li8</li>

    </ul>

</body>

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>ul li:nth-child(2) {background-color: green;}li:nth-child(2n+1) {background-color: blue;}li:last-child {background-color: red;}ul li:first-child {background-color: yellow;}</style>
</head>
<body><ul><li>我是一个li1</li><li>我是一个li2</li><li>我是一个li3</li><li>我是一个li4</li><li>我是一个li5</li><li>我是一个li6</li><li>我是一个li7</li><li>我是一个li8</li></ul>
</body>
</html>

若中间插入其他元素，还能识别得到吗？（源代码加上p标签）

    <ul>

        <li>我是一个li1</li>

        <p>我是p</p>

        <li>我是一个li2</li>

        <li>我是一个li3</li>

        <li>我是一个li4</li>

        <li>我是一个li5</li>

        <li>我是一个li6</li>

        <li>我是一个li7</li>

        <li>我是一个li8</li>

          <p>我是p</p>

    </ul>

这时候我们可以看到寻找第二个li标签与最后一个li标签失败

li:nth-child（）是先找到li标签的父亲是谁，例子中是ul标签，然后他就给ul标签所有儿子标签排了序，排序过程中并不会辨别标签类别，所以会将p标签一起排进来，但是他一数第二个标签不是li标签，所以识别不了，于是他会在不认识的p标签之下，重新开始数。所以后面的奇数标签有用。

这时我们用个新属性:nth-of-type()，他与上面属性最大的区别就是他会认识类别，并只将指定类别排序。看看代码，让第二个 li 变成粉色。

​
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>ul li:nth-child(2) {background-color: green;}li:nth-child(2n+1) {background-color: blue;}li:last-child {background-color: red;}ul li:first-child {background-color: yellow;}li:nth-of-type(2) {background-color: pink;}</style>
</head>
<body><ul><li>我是一个li1</li><li>我是一个li2</li><li>我是一个li3</li><li>我是一个li4</li><li>我是一个li5</li><li>我是一个li6</li><li>我是一个li7</li><li>我是一个li8</li></ul>
</body>
</html>​

10、伪元素选择器

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>ul li::before {     /* ul标签中的li标签前面做什么 */content: "66666"; /* 添加文本 */width: 10px;height: 10px;background-color: pink;}ul li::after {  /* ul标签中的li标签后面添加什么 */content: "----------------zhangsan";}/* 文字被选中时 */ul li::selection {background-color: pink;}</style>
</head><body><ul><li>zhangsan</li></ul></body>
</html>

字体与文本

font-size:字号大小

        font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，谷歌默认14px

font-family:字体

        font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：

p{ font-family:"微软雅黑";}

font-weight:字体粗细

数字 400 等价于 normal，而 700 等价于 bold。  但是我们倾向用数字来表示。 

font-style:字体风格

        字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。

line-height设置行高
text-indent 首行缩进，以em为单位
color文本颜色

color=

1、rgb函数（红、绿、蓝）三原色 

2、rgba函数（红、绿、蓝、透明度） 

3、#00FFFF

text-align:水平对齐方式

相当于html中的align对齐属性。

left：左对齐（默认值）

right：右对齐

center：居中对齐，是让盒子里面的内容水平居中

text-decoration 文本的装饰

text-decoration 通常我们用于给链接修改装饰效果。none：           默认。定义标准的文本。

underline：    定义文本下的一条线。下划线是链接自带的

overline：      定义文本上的一条线。

line-through：定义穿过文本下的一条线。

font:综合设置字体样式  

 选择器{font: font-style  font-weight  font-size/line-height  font-family;}

1、使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

2、注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>div{font: italic 600 25px/50px 宋体;line-height: 50px;/* 让行高等于容器的高度，来实现单行文本的垂直居中  */color: blue;text-align: center;background-color: yellow;}</style>
</head>
<body><div>font:综合设置字体样式</div>
</body>
</html>

text-decoration：综合设置文本样式

选择器{text-decoration: text-decoration-style   td-line    td-color    td-thickness;}   

例如 ：text-decoration: solid underline purple 4px;

text-decoration-style：设置使用的装饰类型，例如 underline 或者 line-through。 

text-decoration-line：设置装饰的线条的颜色，例如 solid、wavy 或者 dashed。

text-decoration-color：颜色

text-decoration-thickness：字体粗细

CSS三大特性

1、层叠性

  1. 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。

  2. 样式不冲突，不会层叠

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>p{color: red;}p {color: yellow;font-style: italic;text-decoration: underline;}p{color: blue;}</style>
</head>
<body><p class="one">层叠性佳人们是什么色</p>
</body>
</html>

2、继承性

子标签会继承父标签的某些属性（字体颜色、字号）

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>.father {font-size: 30px;color: red;}</style>
</head>
<body><div class="father"><div>你是一个子盒子<div>你是一个子盒子</div></div></div>
</body>
</html>

3、优先级

1、继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

2、行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。

3、权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

4、CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

* 通配符0.0.0.0
元素（标签）0,0,0,1
类，伪类0,0,1,0
ID0,1,0,0
行内样式1,0,0,0
!important 重要的∞ 无穷大
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>/* * {color: pink;} */div {color: aquamarine !important;}.one {color: blueviolet;}#two {color: brown;}ul li {background-color: blue;}li {background-color: pink;}/* 权重的四位数字不会进行进位，登记大小的判断，从左向右，一次进行比较继承的权重：为0*/a {display: inline-block;}</style>
</head><body><div class="one" id="two">cnvjfvnjfvnjfvnfj</div><ul><li>我是一个li</li></ul><a href="#">充满电充电口</a>
</body></html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/768134.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

栅格地图路径规划：基于霸王龙优化算法（Tyrannosaurus optimization，TROA）的机器人路径规划（提供MATLAB代码）

栅格地图路径规划：基于霸王龙优化算法（Tyrannosaurus optimization，TROA）的机器人路径规划（提供MATLAB代码）

一、机器人路径规划介绍 移动机器人&#xff08;Mobile robot&#xff0c;MR&#xff09;的路径规划是 移动机器人研究的重要分支之&#xff0c;是对其进行控制的基础。根据环境信息的已知程度不同&#xff0c;路径规划分为基于环境信息已知的全局路径规划和基于环境信息未知或…
阅读更多...
那些王道书里的题目-----计算机网络篇

那些王道书里的题目-----计算机网络篇

注&#xff1a;仅记录个人认为有启发的题目 p155 34.下列四个地址块中&#xff0c;与地址块 172.16.166.192/26 不重叠&#xff0c;且与172.16.166.192/26聚合后的地址块不会引入多余地址的是&#xff08;&#xff09; A.172.16.166.192/27 B.172.16.166.128/26 …
阅读更多...
目标检测中的mAP计算原理和源码实现

目标检测中的mAP计算原理和源码实现

简介 在目标检测任务中&#xff0c;mAP&#xff08;mean Average Precision&#xff0c;平均精度均值&#xff09;是一个非常重要的评价指标&#xff0c;用于衡量模型在多个类别上的平均性能。它综合考虑了模型在不同召回率下的精确率&#xff0c;能够全面反映模型在检测任务中…
阅读更多...
Matlab|【免费】智能配电网的双时间尺度随机优化调度

Matlab|【免费】智能配电网的双时间尺度随机优化调度

目录 1 主要内容 基础模型 2 部分代码 3 部分程序结果 4 下载链接 1 主要内容 该程序为文章《Two-Timescale Stochastic Dispatch of Smart Distribution Grids》的源代码&#xff0c;主要做的是主动配电网的双时间尺度随机优化调度&#xff0c;该模型考虑配电网的高效和安…
阅读更多...
计算机网络——25Internet-Protocol

计算机网络——25Internet-Protocol

Internet Protocol 互联网中的网络层 主机、路由器中的网络层功能 IP数据报格式 项目说明ver版本号&#xff0c;如Ipv4就是0100head len头部的长度&#xff0c;一般头部是20个字节(也就是上图中的5行)&#xff0c;但是也有可选项&#xff0c;也就是头部是变长的&#xff0c;因…
阅读更多...
【C语言】指针基础知识（二）

【C语言】指针基础知识（二）

一&#xff0c;指针变量类型的意义 1&#xff0c;指针的类型决定了&#xff0c;对指针解引⽤的时候有多⼤的权限&#xff08;⼀次能操作⼏个字节&#xff09;。 例如&#xff1a;char* 的指针解引⽤访问⼀个字节&#xff0c;int* 的指针解引⽤访问四个字节&#xff0c;short*…
阅读更多...
[SAP MM] 名词专业术语解释

[SAP MM] 名词专业术语解释

采购凭证 采购凭证通常是一种证明文件&#xff0c;用于记录和跟踪特定时间点的采购活动 采购凭证是指企业在采购物品或服务时所开立的一种凭证&#xff0c;用于记录采购的信息和流程 采购凭证通常包括采购申请、采购订单、采购合同等&#xff0c;其中采购订单是最常用的采购…
阅读更多...
Rust并发编程thread多线程和channel消息传递

Rust并发编程thread多线程和channel消息传递

安全高效的处理并发是 Rust 诞生的目的之一&#xff0c;主要解决的是服务器高负载承受能力。 并发&#xff08;concurrent&#xff09;的概念是指程序不同的部分独立执行&#xff0c;这与并行&#xff08;parallel&#xff09;的概念容易混淆&#xff0c;并行强调的是"同…
阅读更多...
人工智能之Tensorflow批标准化

人工智能之Tensorflow批标准化

批标准化&#xff08;Batch Normalization,BN&#xff09;是为了克服神经网络层数加深导致难以训练而诞生的。 随着神经网络的深度加深&#xff0c;训练会越来越困难&#xff0c;收敛速度会很慢&#xff0c;常常会导致梯度消失问题。梯度消失问题是在神经网络中&#xff0c;当前…
阅读更多...
chatgpt和 github copilot chat哪个更强

chatgpt和 github copilot chat哪个更强

chatgpt大家应该都不陌生 ChatGPT 是由 OpenAI 开发的一种基于 GPT&#xff08;生成式预训练模型&#xff09;的聊天机器人。它可以生成语言上下文相关的响应&#xff0c;从而进行自然语言对话。ChatGPT 利用大规模的语言数据进行预训练&#xff0c;并通过微调或在线学习来适应…
阅读更多...
微服务（基础篇-002-Ribbon）

微服务（基础篇-002-Ribbon）

目录 Ribbon负载均衡&#xff08;1&#xff09; 负载均衡的原理&#xff08;1.1&#xff09; 负载均衡策略&#xff08;1.2&#xff09; Ribbon-IRule(1.2.1) 修改负载均衡的方法&#xff08;1.2.2&#xff09; 懒加载&#xff08;1.3&#xff09; 饥饿加载&#xff08;1…
阅读更多...
力扣74---搜索二维矩阵

力扣74---搜索二维矩阵

目录 题目描述&#xff1a; 思路&#xff1a; 代码&#xff1a; 题目描述&#xff1a; 给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非严格递增顺序排列。 每行的第一个整数大于前一行的最后一个整数。 给你一个整数 targ…
阅读更多...
mac 解决随机出现的蓝色框

mac 解决随机出现的蓝色框

macbookair为什么打字的时候按空格键会出现蓝色框? - 知乎
阅读更多...
求任意数任何可能的乘方的个位数

求任意数任何可能的乘方的个位数

形如该题&#xff1a;用到了循环节 1 2 4 8 6 3 9 7 1 4 6 5 6 7 9 3 1 8 4 2 6 9 1 如图为一到十的数字乘方的个位数的循环&#xff0c;可以看出有的数1个数一循环&#xff0c;有的是2个数一循环&#xff0c;有的是4个一循环。 例题&#xff1a; 则4肯定是所有所有个位数n次方…
阅读更多...
前端学习笔记 | JS进阶

前端学习笔记 | JS进阶

一、作用域 1、局部作用域 &#xff08;1&#xff09;函数作用域 &#xff08;2&#xff09;块作用域 let和const会产生块作用域 &#xff0c;而var不会产生块作用域 2、全局作用域 script标签和js文件的【最外层】变量 3、作用域链 本质&#xff1a;底层的变量查找机制 4、JS…
阅读更多...
Docker(二)：Docker常用命令

Docker(二)：Docker常用命令

docker 查看docker支持的所有命令和参数。 ➜ ~ docker Management Commands:config Manage Docker configscontainer Manage containersimage Manage imagesnetwork Manage networksnode Manage Swarm nodesplugin Manage pluginssecret …
阅读更多...
《手把手教你》系列技巧篇（四十九）-java+ selenium自动化测试-隐藏元素定位与操作（详解教程）

《手把手教你》系列技巧篇（四十九）-java+ selenium自动化测试-隐藏元素定位与操作（详解教程）

1.简介 对于前端隐藏元素&#xff0c;一直是selenium自动化定位元素的隐形杀手&#xff0c;脚本跑到隐藏元素时位置时报各种各样的错误&#xff0c;可是这种隐藏的下拉菜单又没有办法避免&#xff0c;所以非常头痛&#xff0c;这一篇只为交流隐藏元素自动化定位处理方法以及宏哥…
阅读更多...
Docker进阶：Docker-cpmpose 实现服务弹性伸缩

Docker进阶：Docker-cpmpose 实现服务弹性伸缩

Docker进阶&#xff1a;Docker-cpmpose 实现服务弹性伸缩 一、Docker Compose基础概念1.1 Docker Compose简介1.2 Docker Compose文件结构 二、弹性伸缩的原理和实现步骤2.1 弹性伸缩原理2.2 实现步骤 三、技术实践案例3.1 场景描述3.2 配置Docker Compose文件3.3 使用 docker-…
阅读更多...
微软开源Garnet高性能缓存服务安装

微软开源Garnet高性能缓存服务安装

Garnet介绍 Garnet是一款微软研究院基于C#开发而开源的高性能缓存服务&#xff0c;支持Windows、Linux多平台部署&#xff0c;Garnet兼容Redis服务API&#xff0c;在性能和使用架构上较Redis有很大提升&#xff08;官方说法&#xff09;&#xff0c;并提供与Redis一样的命令操…
阅读更多...
Rust egui(3) 增加多个tab

Rust egui(3) 增加多个tab

话说不知道咋写&#xff0c;要不直接上git patch吧。代码都是移植的官方demo&#xff0c;核心改动就是把原来的line_demo换成了plot_demo&#xff0c;里面实现多个ui&#xff0c;然后点击tab标题会切换不同的ui。 如下图&#xff0c;Lines和Markers两个不同的标签对应不同的ui。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023