前端基础之CSS

目录

一、CSS介绍

CSS语法

CSS注释

CSS的几种引入方式

二、CSS选择器

基本选择器

组合选择器

属性选择器

分组和嵌套选择器

伪类选择器

伪元素选择器

选择器的优先级

三、CSS属性相关

宽和高

字体属性

文字属性

背景属性

边框

border-radius

display属性

CSS盒子模型

margin外边距

padding内填充

float浮动

clear

overflow溢出属性

定位（position）

四、综合实例

一、CSS介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

CSS就是对HTML标签做样式的，让不好看的变得更加的好看。

CSS语法

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

选择器 {属性名1:属性值;属性名2:属性值;属性名3:属性值;属性名4:属性值;属性名5:属性值;
}

CSS注释

/*这是注释*/

注释符号的快捷键：ctrl + ? 

CSS的几种引入方式

  • 行内样式

行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<p style="color: red">Hello world.</p>
  • 内部样式

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

<head><meta charset="UTF-8"><title>Title</title><style>p{background-color: #2b99ff;}</style>
</head>
  • 外部样式

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

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

二、CSS选择器

如何学习CSS?

  • 1. 先学习如何找到标签
  • 2. 找到标签之后在进行属性操作

选择器种类非常之多，但是，大多数都是了解的，用的最多的也就几个。对我们来说，只需要掌握几个就可以了。

基本选择器

  • 元素选择器

p {color: "red";}

  • ID选择器

#i1 {background-color: red;
}

  • 类选择器

.c1 {font-size: 14px;
}
p.c1 {color: red;
}

注意：

  1. 样式类名不要用数字开头（有的浏览器不认）。
  2. 标签中的class属性如果有多个，要用空格分隔。

  • 通用选择器

* {color: white;
}

组合选择器

我们使用亲戚关系表示标签之间的关系。

  • 后代选择器
/*li内部的a标签设置字体颜色*/
li a {color: green;
}
  • 儿子选择器
/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {font-family: "Arial Black", arial-black, cursive;
}
  • 毗邻选择器
/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {margin: 5px;
}
  • 弟弟选择器
/*i1后面所有的兄弟p标签*/
#i1~p {border: 2px solid royalblue;
}

属性选择器

  • 通过标签的属性来查找标签，标签都有属性
<div class="c1" id="d1"></div>
  • id值和class值是每个标签都自带的属性，还有另外一种：自定义属性 
  • 通过标签的自定义属性来查找标签
    • 针对于username='kevin' password='123'属性就是div标签的自定义属性
<div class="c1" id="d1" username='kevin' password='123'></div>

分组和嵌套选择器

  • 分组选择器
    • 使用逗号隔开，所有的选择器都是并列的
/*div标签和p标签统一设置字体为红色*/ 
div, p {color: red;
}
  • 嵌套选择器
    • 使用空格隔开，选择器不是并列的，最终生效的还是最后一个选择器 
/*.c1类内部所有p标签设置字体颜色为红色*/
.c1 p {color: red;
}

伪类选择器

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

伪元素选择器

  • first-letter
    • 常用的给首字母设置特殊样式 
p:first-letter {font-size: 48px;color: red;
}
  • before
    • 在每个<p>元素之前插入内容
p:before {content:"你好啊";color:red;
}
  • after
    • 在每个<p>元素之后插入内容
p:after {content:"[?]";color:blue;
}

before和after多用于清除浮动，它可以解决浮动中的父标签塌陷问题!!! 

选择器的优先级

比较选择器的优先级高低

1. 选择器相同的情况下：

  • 就近原则（离谁越近，就听谁的）

2. 选择器不同的情况下：

  • 行内选择器 >>>    id选择器  >>>   类选择器  >>>  标签选择器 

三、CSS属性相关

宽和高

width属性可以为元素设置宽度。

height属性可以为元素设置高度。

块级标签才能设置宽度，内联标签的宽度由内容来决定。

默认情况下，只有块级元素才能设置长、宽，内联元素不能设置，设置了也不错，就是没有效果而已。

字体属性

  • 文字字体

    • font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
body {font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

  • 字体大小

    • inherit表示继承父元素的字体大小值

p {font-size: 14px;
}

字重（粗细）

  • font-weight用来设置字体的字重（粗细） 

值

描述

normal

默认值，标准粗细

bold

粗体

bolder

更粗

lighter

更细

100~900

设置具体粗细，400等同于normal，而700等同于bold

inherit

继承父元素字体的粗细值

文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

  • 十六进制值 - 如: ＃FF0000
  • 一个RGB值 - 如: RGB(255,0,0)
  • 颜色的名称 - 如:  red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

文字属性

文字对齐

  • text-align 属性规定元素中的文本的水平对齐方式。

值

描述

left

左边对齐 默认值

right

右对齐

center

居中对齐

justify

两端对齐

文字装饰

  • text-decoration 属性用来给文字添加特殊效果。

值

描述

none

默认。定义标准的文本。

underline

定义文本下的一条线。

overline

定义文本上的一条线。

line-through

定义穿过文本下的一条线。

inherit

继承父元素的text-decoration属性的值。

常用的为去掉a标签默认的自划线： 

a {text-decoration: none;
}

首行缩进

将段落的第一行缩进 32像素：

p {text-indent: 32px;
}

背景属性

  • 背景颜色
background-color: red;
  • 背景图片
background-image: url('1.jpg');
  • 背景重复
    •  repeat(默认):背景图片平铺排满整个网页
    •  repeat-x：背景图片只在水平方向上平铺
    •  repeat-y：背景图片只在垂直方向上平铺
    •  no-repeat：背景图片不平铺
background-repeat: no-repeat;
  • 背景位置
background-position: left top;
/*background-position: 200px 200px;*/

支持简写：

background:#336699 url('1.png') no-repeat left top;

边框

边框属性

  • border-width
  • border-style
  • border-color
/*简写方式*/
#i1 {border: 2px solid red;
}

边框样式

值

描述

none

无边框。

dotted

点状虚线边框。

dashed

矩形虚线边框。

solid

实线边框。

除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：

#i1 {border-top-style:dotted;border-top-color: red;border-right-style:solid;border-bottom-style:dotted;border-left-style:none;
}

border-radius

用这个属性能实现圆角边框的效果。

将border-radius设置为长或高的一半即可得到一个圆形。

display属性

用于控制HTML元素的显示效果。

值

意义

display:"none"

HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。

display:"block"

默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。

display:"inline"

按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。

display:"inline-block"

使元素同时具有行内元素和块级元素的特点。

CSS盒子模型

以快递盒为例

  1. 快递盒和快递盒之间的举例称为是外边距，用margin值表示
  2. 快递盒和里面物品之间的举例称为是内边距，用padding来表示
  3. 盒子的厚度称为是边框，用border来表示
  4. 物品的实际大小称为是content
  • margin：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
  • padding：用于控制内容与边框之间的距离；   
  • Border(边框)：围绕在内边距和内容外的边框。
  • Content(内容)：盒子的内容，显示文本和图像

看图： 

margin外边距

.margin-test {margin-top:5px;margin-right:10px;margin-bottom:15px;margin-left:20px;
}
/*推荐使用简写*/
.margin-test {margin: 5px 10px 15px 20px;
}

顺序：上右下左

常见居中：

.mycenter {margin: 0 auto;
}

padding内填充

.padding-test {padding-top: 5px;padding-right: 10px;padding-bottom: 15px;padding-left: 20px;
}
/*推荐使用简写*/
.padding-test {padding: 5px 10px 15px 20px;
}

顺序：上右下左 

补充padding的常用简写方式：

  • 提供一个，用于四边；
  • 提供两个，第一个用于上－下，第二个用于左－右；
  • 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
  • 提供四个参数值，将按上－右－下－左的顺序作用于四边；

float浮动

在 CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

关于浮动的两个特点：

  • 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  • 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

三种取值：

  • left：向左浮动
  • right：向右浮动
  • none：默认值，不浮动

CSS 浮动

clear

clear属性规定元素的哪一侧不允许其他浮动元素。

值

描述

left

在左侧不允许浮动元素。

right

在右侧不允许浮动元素。

both

在左右两侧均不允许浮动元素。

none

默认值。允许浮动元素出现在两侧。

inherit

规定应该从父元素继承 clear 属性的值。

注意：clear属性只会对自身起作用，而不会影响其他元素。 

清除浮动

  • 清除浮动的副作用（父标签塌陷问题）

主要有三种方式：

  • 固定高度
  • 伪元素清除法
  • overflow:hidden

伪元素清除法（使用较多）：

.clearfix:after {content: "";display: block;clear: both;
}

overflow溢出属性

值

描述

visible

默认值。内容不会被修剪，会呈现在元素框之外。

hidden

内容会被修剪，并且其余内容是不可见的。

scroll

内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto

如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit

规定应该从父元素继承 overflow 属性的值。

  • overflow（水平和垂直均设置）
  • overflow-x（设置水平方向）
  • overflow-y（设置垂直方向）

圆形头像示例

<!DOCTYPE HTML>
<html>
<head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>圆形的头像示例</title><style>* {margin: 0;padding: 0;background-color: #eeeeee;}.header-img {width: 150px;height: 150px;border: 3px solid white;border-radius: 50%;overflow: hidden;}.header-img>img {width: 100%;}</style>
</head>
<body><div class="header-img"><img src="https://pic.cnblogs.com/avatar/1342004/20180304191536.png" alt="">
</div></body>
</html>

定位（position）

  • 静态定位(static)：默认情况下，所有的标签都是静止的，不能够移动
  • 相对定位(relative)：相对自己原来的位置进行移动
  • 绝对定位(absolute)：相对于是父标签移动的，如果没有父元素，那就按照body移动
  • 固定定位(fixed)：相对于浏览器窗口定位

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绝对定位</title><style>.c1 {height: 100px;width: 100px;background-color: red;float: left;}.c2 {height: 50px;width: 50px;background-color: #ff6700;float: right;margin-right: 400px;position: relative;}.c3 {height: 200px;width: 200px;background-color: green;position: absolute;top: 50px;}</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"><div class="c3"></div>
</div></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>返回顶部示例</title><style>* {margin: 0;}.d1 {height: 1000px;background-color: #eeee;}.scrollTop {background-color: darkgrey;padding: 10px;text-align: center;position: fixed;right: 10px;bottom: 20px;}</style>
</head>
<body>
<div class="d1">111</div>
<div class="scrollTop">返回顶部</div>
</body>
</html>

四、综合实例

顶部导航菜单

<!DOCTYPE HTML>
<html>
<head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>li标签的float示例</title><style>/*清除浏览器默认外边距和内填充*/* {margin: 0;padding: 0;}a {text-decoration: none; /*去除a标签默认的下划线*/}.nav {background-color: black;height: 40px;width: 100%;position: fixed;top: 0;}ul {list-style-type: none; /*删除列表默认的圆点样式*/margin: 0; /*删除列表默认的外边距*/padding: 0; /*删除列表默认的内填充*/}/*li元素向左浮动*/li {float: left;}li > a {display: block; /*让链接显示为块级标签*/padding: 0 15px; /*设置左右各15像素的填充*/color: #b0b0b0; /*设置字体颜色*/line-height: 40px; /*设置行高*/}/*鼠标移上去颜色变白*/li > a:hover {color: #fff;}/*清除浮动 解决父级塌陷问题*/.clearfix:after {content: "";display: block;clear: both;}</style>
</head>
<body>
<!-- 顶部导航栏 开始 -->
<div class="nav"><ul class="clearfix"><li><a href="">玉米商城</a></li><li><a href="">MIUI</a></li><li><a href="">ioT</a></li><li><a href="">云服务</a></li><li><a href="">水滴</a></li><li><a href="">金融</a></li><li><a href="">优品</a></li></ul>
</div>
<!-- 顶部导航栏 结束 -->
</body>
</html>

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

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

相关文章

常见接口测试面试题

常见接口测试面试题

1、按你的理解&#xff0c;软件接口是什么&#xff1f; 答&#xff1a; 就是指程序中具体负责在不同模块之间传输或接受数据的并做处理的类或者函数。 2、HTTP和HTTPS协议区别&#xff1f; 答&#xff1a; https协议需要到CA&#xff08;Certificate Authority&#xff0c;证书…
阅读更多...
物联网整体框架有哪些层面？

物联网整体框架有哪些层面？

物联网是当前非常火热的话题&#xff0c;各个行业对物联网的关注和投入力度也很大&#xff0c;一些互联网巨头都在紧锣密鼓的布局物联网产业&#xff0c;抢占市场先机。 物联网的整体构架大致可以分为以下四个层面&#xff1a; 1.感知识别层 感知层是物联网整体架构的基础&…
阅读更多...
HTML标题、段落、文本格式化

HTML标题、段落、文本格式化

HTML标题&#xff1a; 在HTML文档中&#xff0c;标题是很重要的。标题是通过<h1> - <h6标签进行定义的&#xff0c;<h1> 定义最大的标题&#xff1b;<h6>定义最小的标题。 <hr> 标签在HTML页面中用于创建水平线&#xff0c;hr元素可用于分隔内容。…
阅读更多...
【Linux】Nginx安装使用负载均衡及动静分离（前后端项目部署），前端项目打包

【Linux】Nginx安装使用负载均衡及动静分离（前后端项目部署），前端项目打包

一、Nginx导言 1、引言 Nginx 是一款高性能的 Web 服务器和反向代理服务器&#xff0c;也可以充当负载均衡器、HTTP 缓存和安全防护设备。它的特点是内存占用小、稳定性高、并发性强、易于扩展&#xff0c;因此在互联网领域得到了广泛的使用。 总结出以下三点: 负载均衡&#x…
阅读更多...
CN考研真题知识点二轮归纳（4）

CN考研真题知识点二轮归纳（4）

持续更新&#xff0c;上期目录&#xff1a; CN考研真题知识点二轮归纳&#xff08;4&#xff09;https://blog.csdn.net/jsl123x/article/details/134135134?spm1001.2014.3001.5501 1.既可以扩展网段又是二层的设备 网段一般指一个计算机网络中使用同一物理层设备&#xff…
阅读更多...
小程序如何设置自动使用物流账号发货

小程序如何设置自动使用物流账号发货

小程序支持自动使用物流账号发货并生成运单号。商家需要与物流公司合作&#xff0c;获取物流账号&#xff0c;支持快递物流和同城外卖配送平台。具体方法请参考公众号之前发布的文章&#xff0c;例如可以搜索“快递账号”。 导入物流账号后&#xff0c;在小程序管理员后台->…
阅读更多...
出海营销必看：如何避免邮件被识别为垃圾邮件

出海营销必看：如何避免邮件被识别为垃圾邮件

对于现在的商业环境来说&#xff0c;邮件通信已经成为企业与客户、合作伙伴以及员工之间沟通和交流的重要方式。然而&#xff0c;尽管企业发送的邮件通常都是正常的、合规的&#xff0c;有时候却会被系统错误地标记为营销邮件。这个情况给企业带来了很多困扰。 如果企业的邮件…
阅读更多...
如何使用内网穿透远程访问Linux SVN服务？

如何使用内网穿透远程访问Linux SVN服务？

文章目录 前言1. Ubuntu安装SVN服务2. 修改配置文件2.1 修改svnserve.conf文件2.2 修改passwd文件2.3 修改authz文件 3. 启动svn服务4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射本地端口 5. 测试公网访问6. 配置固定公网TCP端口地址6.1 保留一个固定的公网TCP端口地址6…
阅读更多...
使用vue3+vite+elctron构建小项目介绍Electron进程间通信

使用vue3+vite+elctron构建小项目介绍Electron进程间通信

进程间通信 (IPC) 是在 Electron 中构建功能丰富的桌面应用程序的关键部分之一。 由于主进程和渲染器进程在 Electron 的进程模型具有不同的职责&#xff0c;因此 IPC 是执行许多常见任务的唯一方法&#xff0c;例如从 UI 调用原生 API 或从原生菜单触发 Web 内容的更改。 在 …
阅读更多...
input 调起键盘 ，键盘距离输入框底部太近

input 调起键盘 ，键盘距离输入框底部太近

input 调起键盘 &#xff0c;键盘距离输入框底部太近 解决方法 cursorSpacing‘20’ 单位是 ‘px’ <input cursorSpacing20 type"text" v-model"replyMain" />距离底部距离 20px &#xff0c;输入框距离键盘距离是20px
阅读更多...
centos7 配置搭建 wordpress 博客

centos7 配置搭建 wordpress 博客

环境配置 系统：centos7 CPU:2核 内存：4G 硬盘：40G 一、登录云服务器器 1.单击实例--实例名称 2. 选择安全组页签，单击安全组操作列的管理规则， 3.在入方向添加需要放行的端口。本教程中，在安全组入方向放行SSH默认22端口、Apache默认80端口 4.登录服务器 5.更改主…
阅读更多...
oracle如果不适用toad或者plsql工具如何获取索引建表语句

oracle如果不适用toad或者plsql工具如何获取索引建表语句

select dbms_lob.substr(dbms_metadata.get_ddl(INDEX,INDEX_NAME,DIXON))||; from dba_indexes where ownerDIXON这个语句可以获取dixon用户的所有索引创建语句&#xff0c;sql脚本形式呈现 点开一个语句查看 如果不使用dbms_lob.substr这个函数最后得到是一个clob selec…
阅读更多...
USART HMI串口屏+单片机通讯上手体验

USART HMI串口屏+单片机通讯上手体验

USART HMI串口屏单片机通讯上手体验 &#x1f516;本文采用淘晶驰4.3寸IPS串口屏实物验证&#xff0c;HMI串口屏经简单配置即可快速实现&#xff0c;串口通讯效果。串口屏上手简单&#xff0c;有独立的开发套件&#xff0c;容易上手&#xff0c;驱动显示和功能代码独立。本文仅…
阅读更多...
2021上半年下午网络工程师试题

2021上半年下午网络工程师试题

2021上半年下午网络工程师试题 试题一(共20分) 阅读以下说明&#xff0c;回答问题1至问题4&#xff0c;将解答填入答题纸对应的解答栏内。 【说明】 某企业网络拓扑图如图1-1所示。该网络可以实现的网络功能有: 1.汇聚层交换机A与交换机B采用VRRP技术组网&#xff1b; 2.…
阅读更多...
PerfectPixel 插件，前端页面显示优化工具

PerfectPixel 插件，前端页面显示优化工具

1.简介 PerfectPixel 插件是一款适用于 Chrome 浏览器的网页前端页面显示优化工具&#xff0c;该插件能够帮助开发人员和标记设计人员在开发时将设计图直接加载至网页中&#xff0c;与已成型的网页进行重叠对比&#xff0c;以规范网页像素精度 作为一款可以优化前端页面显示的…
阅读更多...
VSCode 设置平滑光标

VSCode 设置平滑光标

1.点击左下角的设置按钮&#xff0c;再点击设置 2.点击文本编辑器&#xff0c;点击光标&#xff0c;勾选控制是否启用平滑插入动画。 3.随便打开一个文件&#xff0c;上下左右移动光标时&#xff0c;会发现非常的流畅。 原创作者&#xff1a;吴小糖 创作时间&#xff1a;2023…
阅读更多...
[PHP]帮管客CRM客户管理系统 v5.1.0

[PHP]帮管客CRM客户管理系统 v5.1.0

帮管客CRM客户管理系统基于先进的CRM营销理念设计&#xff0c;集客户档案、销售记录、业务往来于一身&#xff0c;以凝聚客户关系、提升资源价值为核心&#xff0c;将潜在客户变为现实客户、从而提升销售量、提高用户的满意度&#xff0c;并增加企业竞争力。帮管客CRM是适用于中…
阅读更多...
基于transformer的解码decode目标检测框架(修改DETR源码)

基于transformer的解码decode目标检测框架(修改DETR源码)

提示：transformer结构的目标检测解码器，包含loss计算，附有源码 文章目录 前言一、main函数代码解读1、整体结构认识2、main函数代码解读3、源码链接二、decode模块代码解读1、decoded的TransformerDec模块代码解读2、decoded的TransformerDecoder模块代码解读3、decoded的De…
阅读更多...
《现代C++语言核心特性解析》笔记（一）

《现代C++语言核心特性解析》笔记（一）

一、新基础类型&#xff08;C11&#xff5e;C20&#xff09; C基础类型回顾一览表 1. 整数类型 long long 我们知道long通常表示一个32位整型&#xff0c;而long long则是用来表示一个64位的整型。不得不说&#xff0c;这种命名方式简单粗暴。不仅写法冗余&#xff0c;而且表…
阅读更多...
【多线程面试题二十二】、 说说你对读写锁的了解

【多线程面试题二十二】、 说说你对读写锁的了解

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;说说你对读写锁的了解 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023