day02 CSS基础

目录

CSS介绍

CSS使用方式

内联方式

内部样式表

外部样式表

CSS特性

优先级

选择器

元素选择器

id选择器

类选择器

派生选择器

子选择器

属性选择器

首个子元素

指定元素选择器

伪类选择器

文本

字体

列表

表格

背景

鼠标

border

宽高

box模型

元素水平居中

轮廓

display

改变显示规则

overflow

Q&A

CSS介绍

  • CSS指层叠样式表（CascadingStyleSheets）

  • 样式定义如何显示HTML元素

  • 样式通常存储在样式表中

CSS使用方式

内联方式

  • 样式定义在单个的HTML的属性style里

<h1 style="color:blue;"></h1>
内部样式表

  • 样式定义在HTML页的头元素中

<style type="text/css">h2{color:red}
</style>
外部样式表

  • 将样式定义在一个外部的CSS文件中（.css文件）

  • 由HTML页面引用样式表文件

CSS特性

  • 继承性

    父元素的CSS的声明可以被子元素继承，如字体、颜色等。

  • 层叠性

    同一个元素若存在多个CSS规则，对于不冲突的声明可以叠加。

  • 优先级

    同一个元素若存在多个CSS规则，对于冲突的声明以优先级高者为准

优先级

（低->高）

  • 浏览器缺省设置

  • 外部样式表或者内部样式表

    就近优先

  • 内联样式

相同的样式，如果重复定义，以最后一次的定义为准

选择器

选择器示例说明
元素选择器p选择所有p标签
id选择器#my选择id值为my的元素
类选择器.my选择class值为my的元素
选择器组h1,p算着所有h1和p元素
派生选择器div p选择div中的所有p元素
子选择器div>p选择父级是div的p元素
属性选择器input[type=text]选择input元素属性type="text"的元素
首个子元素选择器p:first-child匹配 <p> 的父元素的第一个<p>元素
指定元素选择器div p:nth-of-type(2)div中第二个p元素
元素选择器
<style> /*在{}中写属性和值,写法和内联方式一致*/h1{color: red;}/* 同时选择h2和h3元素 多个元素使用逗号隔开 */h2,h3{color: green;}
</style>
id选择器
<style>
/* id选择器 #id值选取元素 */
#p1{
color: pink;
}
</style>
<p id="p1">我是文本2</p>
类选择器
<style>
/* 类选择器:.class值表示选择一组元素 */
.p1{
color: pink;
}
</style>
<p class="p1">我是文本2</p>
派生选择器
<style>div p{color:red;}
</style>
<div><p>我是p1</p>
</div>
子选择器
<style>#container>strong{color: red;}#container u strong{color: blue;}
</style>
</head><body><div id="container"><strong>常州</strong><u>武进<strong>区</strong></u></div></body>
</html>
属性选择器
<style>/* 属性选择器 选择输入框type=text的元素*/input[type=text]{color:red;}       p[a=one]{color:red;}
</style>
<input type="text" >
<p a=one>千山鸟飞绝</p>
首个子元素
<style>/* 选择div中第一个p元素 */div p:first-child{color: red;}
</style>
指定元素选择器
<style>/* 选择div中第三个p元素*/div p:nth-of-type(3){color: blue;}
</style>
伪类选择器
选择器名称说明
:link向未被访问的超链接添加样式
:visited向已被访问的超链接添加样式
:hover当鼠标悬停至元素上方时，向该元素添加样式
:focus当元素获取焦点时，向该元素添加样式

文本

属性名说明
color字体颜色
text-align字体对齐方式 center 水平居中 right靠右对齐
line-height控制行与行的距离 一般可以让行高等于当前元素的高度,让文字垂直居中
letter-spacing字体的间距 单位像素px
text-indent首行缩进 单位像素px

字体

属性名说明
font-size字体大小 单位一般使用px rem 1rem=16px
font-family字体的系列
font-weight字体的粗细 通过100的整数来控制 值越大字体越粗

列表

属性名说明
list-style-type每一项的图标显示
list-style-image可以引用图标代替默认图标显示 url('')
<style>ol{list-style-type: circle;list-style-type: disc;list-style-type: lower-roman;list-style-type: upper-roman;list-style-type: none;list-style-image: url('../../img/a.png');}
</style>

表格

<style>table{border-collapse: collapse;width: 500px;text-align: center;background-color: cadetblue;}th{color:red;}tr{height: 40px;color:#fff;}</style><body><table border="1" align="center"><thead><th>学号</th><th>姓名</th><th>性别</th><th>年龄</th></thead><tbody><tr><td>1002</td><td>tom2</td><td>女</td><td>20</td></tr></tbody><tfoot><th colspan="3">平均年龄</th><th>20</th></tfoot></table></body>

背景

  • background-image属性用于设置背景图片

    默认值是name，表示背景上没有放置任何图像

    如果需要设置一个背景图像，需要用起始字母url附带一个图像的URL

    可以是相对URL或者绝对URL

  • 默认情况下，背景图片在水平和垂直方向上重复出现，创建一种称为“墙纸”的效果

  • background-repeat属于可以控制背景图片的平铺效果

  • background-repeat可取值为

    repeat：在垂直方向和水平方向重复，为重复值

    repeat-x：仅在水平方向重复

    repeat-y：仅在垂直方向重复

    no-repeat：仅显示一次

  • background-position属性用于改变背景图片元素种的位置，该属性的取值为

值说明
x%y%第一个值是水平位置，第二个值是垂直位置，表示沿着x（水平）和y轴（垂直）的百分比，左上角是0%0%，右下角是100%100%
xy第一个值是水平位置，第二个值是垂直位置，表示沿着x轴（水平）和y轴（垂直）的绝对长度，左上角是0 0
left在页面或者包含元素的左边显示
center在页面或者包含元素的中间显示
right在页面或者包含元素的右边显示
top在页面或者包含元素的顶部显示
bottom在页面或者包含元素的底部显示

鼠标

#div3:hover{
cursor: pointer;
cursor: crosshair;
cursor: wait;
cursor: help;
cursor: text;
cursor: default;
}
<div id="div3">我是div</div>

border

  • border属性：用来设置元素的边框,任何元素都有边框

  • 四边设置

    • border:width值style值color值；

  • 单边设置

    • border-left:width值style值color值；

    • border-right:width值style值color值；

    • border-top:width值style值color值；

    • border-bottom:width值style值color值

宽高

块元素和行内块元素有宽高属性 行内元素没有宽高属性

box-sizing: border-box;//加上边框的总宽度等于元素宽度

box模型

框模型（BoxModel）定义了元素框处理元素内容、内边距、边框和外边距的方式。

padding:元素内容距离边框的距离,增加padding会使元素体积变大,实际显示内容不变

marging:边框距离别的元素的距离

元素水平居中

margin:0 auto;

轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

属性说明值
outline设置轮廓属性none,width,style,color 用法和border一致

display

  • 元素都有自己默认的显示方式，包括

    • 块元素

      从上至下，可以设置宽高，如<h1>、<p>、<div>等

    • 行内元素

      从左至右，不能设置宽高，如<span>、<a>等

    • 行内块

      从左至右，可以设置宽高，如<input>、<img>等

除了默认的显示效果之外，可以使用display属性来修改元素框的显示方式，即改变生成的框的类型

改变显示规则

  • 用于改变元素的显示方式，其取值有：none、block、inline、inline-bloack

    • none：不显示该元素，释放其占用位置

    • block：将元素显示方式设置为块，如何以将行内元素<a>转换为块元素inline：将元素显示方式设置为行内，如可以将块元素<p>转换为行内元素

    • inline-bloack：将元素显示方式设置为行内快，如可以将行内元素<Span>转换为行内块元素

overflow

值说明
visible默认值 溢出时会显示在元素框之外。
hidden超出部分会隐藏
scroll出现滚动条
auto溢出时才出现滚动条

Q&A

题1 CSS使用方式有哪些及优先级

CSS使用方式有内联、内部、外部，外部样式表或内部样式表根据就近优先原则决定优先级，内联样式优先级最高

题2 CSS常用选择器有哪些及含义

选择器示例说明
元素选择器p选择所有p标签
id选择器#my选择id值为my的元素
类选择器.my选择class值为my的元素
选择器组h1,p算着所有h1和p元素
派生选择器div p选择div中的所有p元素
子选择器div>p选择父级是div的p元素
属性选择器input[type=text]选择input元素属性type="text"的元素
首个子元素选择器p:first-child匹配 <p> 的父元素的第一个<p>元素
指定元素选择器div p:nth-of-type(2)div中第二个p元素

题3 元素box模型中,有哪些部分组成及含义

组成包括element（元素）、padding（内边距）、margin（外边框）、border（边框）

题4 元素有哪些显示方式及切换显示

显示方式包括：块、行内、行内块

切换显示通过更改display的属性值：none（不显示该元素）、block（将元素显示方式设置为块）、inline（元素显示方式设置为行内）、nline-bloack（将元素显示方式设置为行内块）

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

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

相关文章

SpringCloudAlibaba组件集成

SpringCloudAlibaba组件集成

SpringCloudAlibaba组件集成 Nacos服务注册与发现 1.Nacos认识与安装 1.1.什么是Nacos Nacos和Eureka有着相同的能力&#xff0c;甚至更为强大&#xff0c;作为Dubbo 生态系统中重要的注册中心实现。官方对它有如下定义&#xff1a; Nacos致力于帮助您发现&#xff0c;配置…
阅读更多...
查看mysql数据库端口号

查看mysql数据库端口号

在MySQL中&#xff0c;可以通过多种方式查看数据库服务器的端口号。以下是一些常见的方法&#xff1a; 1. 使用MySQL配置文件 MySQL服务器的端口号通常在配置文件中设置。在Linux系统上&#xff0c;这个配置文件通常是/etc/my.cnf、/etc/mysql/my.cnf&#xff0c;或者在/etc/…
阅读更多...
Java+Angular+Nginx+RESTful API 医院云HIS系统源码 全国中小型诊所都在用的诊所his系统门诊业务流程 自主版权

Java+Angular+Nginx+RESTful API 医院云HIS系统源码 全国中小型诊所都在用的诊所his系统门诊业务流程 自主版权

JavaAngularNginxRESTful API 医院云HIS系统源码 全国中小型诊所都在用的诊所his系统门诊业务流程 自主版权 HIS系统&#xff08;Hospital Information System&#xff09;在门诊业务中的应用带来了许多显著的优势&#xff0c;这些优势不仅提高了医疗服务的质量和效率&#xf…
阅读更多...
centos8 安装python3、pip、pyinstall

centos8 安装python3、pip、pyinstall

centos8安装python3 安装python3&#xff1a;https://www.cnblogs.com/qq931399960/p/11664594.html bash # 步骤&#xff1a;1、输入python3看有没有 # 2、使用yum -y install python 安装 # 3、指定版本安装&#xff1a;yum -y install python39 [rootlocalhost ~]# python…
阅读更多...
Zookeeper：启动占用8080端口

Zookeeper：启动占用8080端口

zookeeper最近的版本中有个内嵌的管理控制台是通过jetty启动&#xff0c;也会占用8080 端口。 通过查看zookeeper的官方文档&#xff0c;发现有3种解决途径&#xff1a; &#xff08;1&#xff09;.删除jetty。 &#xff08;2&#xff09;修改端口。 一种是在启动脚本中增加…
阅读更多...
【linux】操作系统使用wget下载网络文件，内核tcpv4部分运行日志

【linux】操作系统使用wget下载网络文件，内核tcpv4部分运行日志

打印日志代码及运行日志(多余日志被删除了些)&#xff1a; 登录 - Gitee.comhttps://gitee.com/r77683962/linux-6.9.0/commit/55a53caa06c1472398fac30113c9731cb9e3b482 测试步骤和手段&#xff1a; 1、清空 kern.log&#xff1b; 2、使用wget 下载linux-6.9.tar.gz&…
阅读更多...
切割游戏介绍

切割游戏介绍

简介 上大学时&#xff0c;在学校实验室里玩过一个貌似使用VC写的小游戏&#xff0c;一个小球在界面上四处游荡&#xff0c;玩家使用鼠标切割背景&#xff0c;将背景切割剩余到一定的百分比后&#xff0c;就胜利了&#xff0c;后边的背景图会全部展示出来。 使用qt的qml技术&a…
阅读更多...
初始化一个Android项目时，Android Studio会自动生成一些文件和目录结构，以帮助你快速上手开发

初始化一个Android项目时，Android Studio会自动生成一些文件和目录结构，以帮助你快速上手开发

当你初始化一个Android项目时&#xff0c;Android Studio会自动生成一些文件和目录结构&#xff0c;以帮助你快速上手开发。这些文件和目录各自有其特定的功能和用途。下面我为你解释一下这些自动生成的内容&#xff1a; 1. app 目录 这是你的应用模块的根目录&#xff0c;包…
阅读更多...
django学习入门系列之第二点《浏览器能识别的标签1》

django学习入门系列之第二点《浏览器能识别的标签1》

文章目录 文件的编码(head)网站表头信息(head)标题&#xff08;body&#xff09;div和span往期回顾 文件的编码(head) <!--浏览器会以"UTF-8"这种编码来读取文件--> <meta charset"UTF-8">网站表头信息(head) <title>Title</title&…
阅读更多...
使用 Iceberg、Tabular 和 MinIO 构建现代数据架构

使用 Iceberg、Tabular 和 MinIO 构建现代数据架构

现代数据环境需要一种新型的基础架构&#xff0c;即无缝集成结构化和非结构化数据、轻松扩展并支持高效的 AI/ML 工作负载的基础架构。这就是现代数据湖的用武之地&#xff0c;它为您的所有数据需求提供了一个中心枢纽。然而&#xff0c;构建和管理有效的数据湖可能很复杂。 这…
阅读更多...
为何选择企业微信作为私域运营的首选工具？

为何选择企业微信作为私域运营的首选工具？

随着数字化营销的不断深入&#xff0c;私域流量的价值愈发凸显。在众多的私域运营工具中&#xff0c;企业微信凭借其独特的功能和优势&#xff0c;逐渐成为了众多企业的首选。本文将详细阐述为何选择企业微信作为私域运营的首选工具&#xff0c;并从多个维度进行对比分析。 一…
阅读更多...
总台，地方卫视媒体邀约新闻报道采访怎么做？

总台，地方卫视媒体邀约新闻报道采访怎么做？

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 总台对选题要求非常严格&#xff0c;在想做总台新闻报道之前&#xff0c;让我们先来了解下总台对新闻选题有哪些要求&#xff1a; 一、新闻价值 社会意义&#xff1a;新闻报道的首要任务…
阅读更多...
【CHIP】LTC2991 读取温度电压电流 调试实例

【CHIP】LTC2991 读取温度电压电流 调试实例

文章目录 0. ENV1. LTC2991 数据说明1. 数据计算公式2. 寄存器概述1. 管脚使能寄存器2. 芯片使能寄存器 2. 软件实现1. 概述2. 源码(部分)3. 参考log 0. ENV 软件系统&#xff1a;略 LTC2991&#xff1a;VCC3.3 温度&#xff1a;温控接v1-v2 / v2-v3 / … (双端采样)电压&#…
阅读更多...
C#面：C# 类的执行顺序？

C#面：C# 类的执行顺序？

C# 类的执行顺序可以分为以下几个步骤&#xff1a; 静态字段初始化&#xff1a;在类的第一次使用之前&#xff0c;静态字段会被初始化。静态字段的初始化顺序是按照它们在代码中的声明顺序进行的。静态构造函数&#xff1a;如果类中定义了静态构造函数&#xff0c;它会在类的第…
阅读更多...
QT工作笔记

QT工作笔记

文章目录 QDialog的accept()和reject()介绍QPushButton提示属性样式表QComboBox QDialog的accept()和reject()介绍 accept() 和reject() 这两个槽函数都会和close() 一样关闭dialogaccept() 关闭后 返回了Dialog::Acceptedreject() 关闭后 返回了Dialog::Rejected这样当我们需…
阅读更多...
Eclipse项目导入笔记大全踩坑大全

Eclipse项目导入笔记大全踩坑大全

文章目录 关于Eclipse启动Tomcat时报错Error: Could not create the Java Virtual MachineWEB-INF/lib/servlet-api.jar not loadedresourcemanager java.lang.ClassNotFoundException: javax.activation.DataSourceEclipse怎么配置jdk在eclipse上配置tomcat&#xff08;包括解…
阅读更多...
Ubutnu服务器修改DNS

Ubutnu服务器修改DNS

TL;DR # dns行为的配置文件 /etc/resolv.conf # 针对使用 systemd-resolved 服务的配置文件&#xff1b;编辑 /etc/systemd/resolved.conf # 重启systemd-resolved服务 systemctl restart systemd-resolved # 备份 mv /etc/resolv.conf /etc/resolv.conf.bak # 创建新文件 ln …
阅读更多...
【算法专题--链表】K个一组翻转链表 -- 高频面试题（图文详解，小白一看就懂！！！）

【算法专题--链表】K个一组翻转链表 -- 高频面试题（图文详解，小白一看就懂！！！）

目录 一、前言 二、题目描述 三、解题方法 ⭐双指针 -- 采用哨兵位头节点 &#x1f95d; 什么是哨兵位头节点&#xff1f; &#x1f34d; 案例图解 四、总结与提炼 五、共勉 一、前言 K个一组翻转链表 这道题&#xff0c;可以说是--链表专题--&#xff0c;最经典…
阅读更多...
LeetCode 1789, 6, 138

LeetCode 1789, 6, 138

目录 1789. 员工的直属部门题目链接表要求知识点思路代码 6. Z 字形变换题目链接标签思路代码 138. 随机链表的复制题目链接标签思路代码 1789. 员工的直属部门 题目链接 1789. 员工的直属部门 表 表Employee的字段为employee_id&#xff0c;department_id和primary_flag。…
阅读更多...
静态变量和实例变量的区别？

静态变量和实例变量的区别？

静态变量和实例变量的区别 语法定义上的区别&#xff1a; 静态变量&#xff1a;在声明变量时使用 static 关键字。实例变量&#xff1a;不使用 static 关键字。 程序运行时的区别&#xff1a; 静态变量&#xff1a; 属于类本身&#xff0c;不属于任何实例对象。当类被加载时…
阅读更多...
最新文章

Copyright @ 2022~2023