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:设置装饰的线条的颜色,例如 solidwavy 或者 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.rhkb.cn/news/289207.html

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

相关文章

Redis 不再“开源”:中国面临的挑战与策略应对

Redis 不再“开源”&#xff0c;使用双许可证 3 月 20 号&#xff0c;Redis 的 CEO Rowan Trollope 在官网上宣布了《Redis 采用双源许可证》的消息。他表示&#xff0c;今后 Redis 的所有新版本都将使用开源代码可用的许可证&#xff0c;不再使用 BSD 协议&#xff0c;而是采用…

【快捷部署】010_MySQL(5.7.27)

&#x1f4e3;【快捷部署系列】010期信息 编号选型版本操作系统部署形式部署模式复检时间010MySQL5.7.27Ubuntu 20.04Docker单机2024-03-28 一、快捷部署 #!/bin/bash ################################################################################# # 作者&#xff1a…

ES5和ES6的深拷贝问题

深拷贝我们知道是引用值的一个问题&#xff0c;因为在拷贝的时候&#xff0c;拷贝的是在内存中同一个引用。所以当其中的一个应用值发生改变的时候&#xff0c;其他的同一个引用值也会发生变化。那么针对于这种情况&#xff0c;我们需要进行深度拷贝&#xff0c;这样就可以做到…

Docker部署一个SpringBoot项目(超级详细)

注意&#xff1a;下面的教程主要是针对 Centos7 的&#xff0c;如果使用的其他发行版会有细微的差别&#xff0c;请查看官方文档。 Docker部署一个SpringBoot项目&#xff08;超级详细&#xff09; 一、安装Docker1.卸载旧版2.配置Docker的yum库3.安装Docker4.设置开机自启动5.…

#Linux(make工具和makefile文件以及makefile语法)

&#xff08;一&#xff09;发行版&#xff1a;Ubuntu16.04.7 &#xff08;二&#xff09;记录&#xff1a; &#xff08;1&#xff09;make为编译辅助工具&#xff0c;解决用命令编译工程非常繁琐的问题 &#xff08;2&#xff09;在终端键入make即可调用make工具&#xff0…

Linux:环境变量的特性及获取

目录 一、环境变量基本概念 1.1命令行参数 1.2常见环境变量 二、环境变量相关指令 创建本地变量 三、环境变量通常是具有全局属性的 一、环境变量基本概念 环境变量(environment variables)不是一个而是一堆&#xff0c;彼此之间其实没有关系。本质上是为了解决不同场景下…

ebpf的CO-RE功能介绍

目录 CO-RE 引入 思路 介绍 使用 CO-RE 引入 因为ebpf需要深入内核,但内核中的数据结构很可能在不同版本中定义不同(尤其是结构体,可能会增加某个字段) 但我们在访问结构体时,比如一般通过指针偏移量来拿到特定变量的首地址 如果定义变化,偏移量就会变化,就会需要多份ebp…

算法打卡day20

今日任务&#xff1a; 1&#xff09;669.修剪二叉搜索树 2&#xff09;108.将有序数组转换为二叉搜索树 3&#xff09;538.把二叉搜索树转换为累加树 669.修剪二叉搜索树 题目链接&#xff1a;669. 修剪二叉搜索树 - 力扣&#xff08;LeetCode&#xff09; 给你二叉搜索树的根…

【机器学习】代价函数

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;机器学习 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进…

是德科技安捷伦 E5052B信号源分析仪

181/2461/8938产品概述&#xff1a; Keysight E5052B&#xff08;安捷伦&#xff09;信号源分析仪&#xff0c;10 MHz 至 7 GHz&#xff0c;具有许多增强的性能特性。它在表征 VCO 或其他类型的高频信号源以及高速数据通信系统中的时钟抖动评估方面提供了世界上最高的测量吞吐…

Vuepress 2从0-1保姆级进阶教程——美化与模板

Vuepress 2 专栏目录 1. 入门阶段 Vuepress 2从0-1保姆级入门教程——环境配置篇Vuepress 2从0-1保姆级入门教程——安装流程篇Vuepress 2从0-1保姆级入门教程——文档配置篇Vuepress 2从0-1保姆级入门教程——范例与部署 2.进阶阶段 Vuepress 2从0-1保姆级进阶教程——全文搜索…

一分钟开服 《幻兽帕鲁》游戏专属服务器by京东云主机

使用京东云服务器搭建幻兽帕鲁Palworld游戏联机服务器教程&#xff0c;非常简单&#xff0c;京东云推出幻兽帕鲁镜像系统&#xff0c;镜像直接选择幻兽帕鲁镜像即可一键自动部署&#xff0c;不需要手动操作&#xff0c;真正的新手0基础部署幻兽帕鲁&#xff0c;阿腾云atengyun.…

精品凉拌菜系列热卤系列课程

这一系列课程涵盖精美凉拌菜和美味热卤菜的制作技巧。学员将学习如何选材、调味和烹饪&#xff0c;打造口感丰富、色香俱佳的菜肴。通过实践训练&#xff0c;掌握独特的烹饪技能&#xff0c;为家庭聚餐或职业厨艺提升增添亮点。 课程大小&#xff1a;6.6G 课程下载&#xff1…

【测试开发学习历程】MySQL增删改操作 + 备份与还原 + 索引、视图、存储过程

前言&#xff1a; SQL内容的连载&#xff0c;到这里就是最后一期啦&#xff01; 如果有小伙伴要其他内容的话&#xff0c;我会追加内容的。&#xff08;前提是我有学过&#xff0c;或者能学会&#xff09; 接下来&#xff0c;我们就要开始python内容的学习了 ~ ~ 目录 1 …

蓝鹏为何专注智能测量仪的加工定制?

在这个日新月异的科技时代&#xff0c;自动化工厂层出不穷&#xff0c;并且是在不断地升级改造&#xff0c;为了产品的高速高质高效的自动化生产&#xff0c;智能测量仪的重要性不言而喻。智能测量仪的种类很多&#xff0c;蓝鹏一直致力于专业仪器定制&#xff0c;但你有没有想…

STM32通用输入输出

一、GPIO介绍 功能&#xff1a; 输入&#xff08;Input&#xff09;&#xff1a; 浮空:输入没有接上拉和下拉 模拟&#xff1a;输入没有走上拉和下拉走的是模拟输入 上拉&#xff1a;上拉电阻是合上的&#xff0c;接入点为上拉电阻 下拉&#xff1a;下拉电阻是合上的 输…

蓝桥杯 - 小明的背包1(01背包)

解题思路&#xff1a; 本题属于01背包问题&#xff0c;使用动态规划 dp[ j ]表示容量为 j 的背包的最大价值 注意&#xff1a; 需要时刻提醒自己dp[ j ]代表的含义&#xff0c;不然容易晕头转向 注意越界问题&#xff0c;且 j 需要倒序遍历 如果正序遍历 dp[1] dp[1 - vo…

Radio Silence for mac 好用的防火墙软件

Radio Silence for Mac是一款功能强大的网络防火墙软件&#xff0c;专为Mac用户设计&#xff0c;旨在保护用户的隐私和网络安全。它具备实时网络监视和控制功能&#xff0c;可以精确显示每个网络连接的状态&#xff0c;让用户轻松掌握网络活动情况。 软件下载&#xff1a;Radio…

mysql公用表表达式CTE

公用表达式是MySQL8.0的新特性&#xff0c;它是一个命名的临时结果集&#xff0c;作用范围是当前语句。 可以理解成为当前sql语句定义了一个视图&#xff0c;sql语句的任何地方都可以使用这个视图&#xff0c;如果被多次使用就体现出了公用表达式的特点公用。 依据语法结构和执…

从零开始的深度学习入门指南

1. 引言 1.1. 深度学习的定义和背景&#xff1a;深度学习是一种复杂的机器学习技术&#xff0c;其目的是训练一个深度神经网络来解决现实世界中的各种问题。深度学习由一组相互连接的神经元组成&#xff0c;每个神经元都有自己的权重&#xff0c;这些权重被优化以实现预测和分…