【CSS-语法】

CSS-语法

  • ■ CSS简介
  • ■ CSS 实例
  • ■ CSS id 和 class选择器
  • ■ CSS 样式表
    • ■ 外部样式表(External style sheet)
    • ■ 内部样式表(Internal style sheet)
    • ■ 内联样式(Inline style)
    • ■ 多重样式
  • ■ CSS 文本
    • ■ CSS 文本颜色
    • ■ CSS 文本的对齐方式
    • ■ CSS 文本修饰
    • ■ CSS 文本转换
    • ■ CSS 文本缩进
    • ■ CSS 指定字符之间的空间
    • ■ CSS 指定行与行之间的空间
    • ■ CSS 设置元素的文本方向
    • ■ CSS 增加单词之间的空白空间
    • ■ CSS 在元素内禁用文字不换行
    • ■ CSS 垂直对齐图像
    • ■ CSS 添加文本阴影
  • ■ CSS 字体
  • ■ CSS 链接
  • ■ CSS 列表
  • ■ CSS

■ CSS简介

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

学习网站

■ CSS 实例

CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:
在这里插入图片描述

/*这是个注释*/
p
{text-align:center;/*这是另一个注释*/color:black;font-family:arial;
}

■ CSS id 和 class选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器
#para1
{text-align:center;color:red;
}
<p id="para1">Hello World!</p>

class 选择器用于描述一组元素的样式，
class 选择器有别于id选择器，
class可以在多个元素中使用。

<style>
.center
{text-align:center;
}
</style>
</head><body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>

多个 class 选择器可以使用空格分开：

<style>
.center {text-align:center;
}
.color {color:#ff0000;
}
</style>
</head><body>
<h1 class="center">标题居中</h1>
<p class="center color">段落居中，颜色为红色。</p>

■ CSS 样式表

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

■ 外部样式表(External style sheet)

当样式需要应用于很多页面时，外部样式表将是理想的选择。
你可以通过改变一个文件来改变整个站点的外观

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>样式表应该以 .css 扩展名进行保存
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
//不要在属性值与单位之间留有空格（如："margin-left: 20 px" ），正确的写法是 "margin-left: 20px" 。

■ 内部样式表(Internal style sheet)

当单个文档需要特殊的样式时，就应该使用内部样式表。

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

■ 内联样式(Inline style)

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。
请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

■ 多重样式

多重样式优先级
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

例如，外部样式表拥有针对 h3 选择器三个属性
h3
{color:red;text-align:left;font-size:8pt;
}
而内部样式表拥有针对 h3 选择器的两个属性：
h3
{text-align:right;font-size:20pt;
}
内部样式表与外部样式表链接 那么 h3 得到的样式是：
color:red;
text-align:right;
font-size:20pt;

■ CSS 文本

■ CSS 文本颜色

  • 十六进制值 - 如: ＃FF0000
  • 一个RGB值 - 如: RGB(255,0,0)
  • 颜色的名称 - 如: red
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

■ CSS 文本的对齐方式

水平对齐方式。
文本可居中或对齐到左或右,两端对齐.

■ CSS 文本修饰

text-decoration 属性用来设置或删除文本的装饰。

<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
</head><body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>

在这里插入图片描述

■ CSS 文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。

<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head><body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>

在这里插入图片描述

■ CSS 文本缩进

文本缩进属性是用来指定文本的第一行的缩进。

<style>
p {text-indent:50px;}
</style>
</head>
<body><p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p></body>
</html>

在这里插入图片描述

■ CSS 指定字符之间的空间

<style>
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>

■ CSS 指定行与行之间的空间

<style>
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>

■ CSS 设置元素的文本方向

<style type="text/css">
div.ex1 {direction:rtl;}
</style>
</head>
<body><div>一些文本。 默认书写方向</div>
<div class="ex1">一些文本。从右到左的书写方向。</div></body>

■ CSS 增加单词之间的空白空间

<style type="text/css">
p
{ word-spacing:30px;
}
</style>
</head>
<body><p>
This is some text. This is some text.
</p>

在这里插入图片描述

■ CSS 在元素内禁用文字不换行

<style type="text/css">
p
{white-space:nowrap;
}
</style>
</head>
<body><p>
这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
</p>

不换行显示
在这里插入图片描述

■ CSS 垂直对齐图像

<style>
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head><body>
<p>一个<img src="logo.png" alt="w3cschool" width="270" height="50" />默认对齐的图像。</p> 
<p>一个<img class="top" src="logo.png" alt="w3cschool" width="270" height="50" />  text-top 对齐的图像。</p> 
<p>一个<img class="bottom" src="logo.png" alt="w3cschool" width="270" height="50" /> text-bottom 对齐的图像。</p>
</body>

在这里插入图片描述

■ CSS 添加文本阴影

<style>
h1 {text-shadow:2px 2px #FF0000;}
</style>
</head>
<body><h1>Text-shadow 效果</h1><p><b>注意：</b> Internet Explorer 9 以及更早的浏览器不支持 text-shadow 属性。</p></body>

在这里插入图片描述

■ CSS 字体

CSS字体属性定义字体，加粗，大小，文字样式。

Property描述
font在一个声明中设置所有的字体属性
font-family指定文本的字体系列
font-size指定文本的字体大小
font-style指定文本的字体样式
font-variant以小型大写字体或者正常字体显示文本。
font-weight指定字体的粗细。

字体系列
ont-family 属性设置文本的字体系列。
font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

p{font-family:"Times New Roman", Times, serif;}

字体样式

正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head><body>
<p class="normal">这是一个段落,正常。</p>
<p class="italic">这是一个段落,斜体。</p>
<p class="oblique">这是一个段落,斜体。</p>
</body>

字体大小
font-size 属性设置文本的大小。

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

用em来设置字体大小
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

使用百分比和EM组合

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

<style>
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
</style>
</head>
<body><h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。</p>

在这里插入图片描述

■ CSS 链接

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

  • a:link - 正常，未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

当设置为若干链路状态的样式，也有一些顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

a:link {color:#000000;}     /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}    /* 鼠标移动到链接上 */
a:active {color:#0000FF;}   /* 鼠标点击时 */

<style>
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}   /* 已访问链接 */
a:hover {color:#FF00FF;}     /* 鼠标移动到链接上 */
a:active {color:#0000FF;}    /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>文本修饰
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}背景颜色
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

■ CSS 列表

  • 无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
  • 有序列表 ol - 列表项的标记有数字或字母
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

■ CSS

https://www.runoob.com/css/css-rwd-videos.html

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

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

相关文章

网络原理 HTTP _ HTTPS

网络原理 HTTP _ HTTPS

回顾 我们前面介绍了HTTP协议的请求和响应的基本结构 请求报文是由首行请求头空行正文来组成的 响应报文是由首行形影头空行响应正文组成的 我们也介绍了一定的请求头之中的键值对的属性 Host,Content-type,Content-length,User-agent,Referer,Cookie HTTP协议中的状态码 我们先…
阅读更多...
网络原理TCP之“三次握手“

网络原理TCP之“三次握手“

TCP内核中的建立连接 众所周知,TCP是有连接的. 当我们在客户端敲出socket new Socket(serverIp,severPort)时,就在系统内核就在建立连接 真正建立连接是在系统内核中建立的,我们程序员只是调用相关的api. 在此处,我们把TCP的建立连接称为三次握手. 系统在内核建立连接时如上…
阅读更多...
SQL-FEFT JOIN （拼接表）

SQL-FEFT JOIN （拼接表）

语法 SELECT column_name(s) FROM table1 LEFT JOIN table2 ON table1.column_nametable2.column_name; 按照一定规则&#xff0c;将表table1和表table2拼接起来。 例&#xff1a; Employees 表&#xff1a; ------------------------ | Column Name | Type | ------…
阅读更多...
QoS 服务质量

QoS 服务质量

服务质量 QoS (Quality of Service) 服务质量可用若干基本性能指标来描述&#xff0c;包括&#xff1a;可用性、差错率、响应时间、吞吐量、分组丢失率、连接建立时间、故障检测和改正时间等。 服务提供者可向其用户保证某一种等级的服务质量。 服务性能的总效果&#xff0c;…
阅读更多...
【接口加密】接口加密的未来发展与应用场景

【接口加密】接口加密的未来发展与应用场景

目录 3.1 接口加密与区块链技术的结合 3.1.1 区块链技术的安全特性与优势 3.1.2 接口加密在区块链中的应用案例 3.2 接口加密与物联网安全 3.2.1 物联网安全的挑战与需求 3.2.2 接口加密在物联网领域的实际应用 3.3 接口加密在金融与电子商务领域的应用 随着信息技术的不…
阅读更多...
【Java网络编程06】HTTPS原理

【Java网络编程06】HTTPS原理

1. HTTPS基本概念 HTTPS&#xff1a;HTTPS也是一个应用层协议&#xff0c;它在HTTP协议的基础上引入了一个加密层——SSL协议&#xff0c;区别就在于HTTP协议是基于明文传输的&#xff08;不安全&#xff09;&#xff0c;使用HTTPS加密就能在一定程度上防止数据在传输过程中被…
阅读更多...
redis架构系列——生产常用的部署模式介绍

redis架构系列——生产常用的部署模式介绍

主从高可用模式 这是最基本的高可用模式&#xff0c;它允许数据从主节点自动复制到一个或多个从节点。这种模式下&#xff0c;从节点可以处理读操作&#xff0c;从而实现负载均衡&#xff0c;并提供故障恢复的基本功能。然而&#xff0c;它的故障恢复不能自动化&#xff0c;写操…
阅读更多...
内核解读之内存管理（8）什么是page cache

内核解读之内存管理（8）什么是page cache

文章目录 0. 文件系统的层次结构1.什么是page cache2.感观认识page cache3. Page Cache的优缺点3.1 Page Cache 的优势3.2 Page Cache 的劣势 0. 文件系统的层次结构 在了解page cache之前&#xff0c;我们先看下文件系统的层次结构。 1 VFS 层 VFS &#xff08; Virtual Fi…
阅读更多...
Vulhub 靶场训练 DC-8解析

Vulhub 靶场训练 DC-8解析

一、环境搭建 kali的IP地址&#xff1a;192.168.200.14 DC-8的IP地址&#xff1a;192.168.200.13&#xff08;一个flag&#xff09; 靶机和攻击机处于同一个网络方式&#xff1a;nat或桥接 若出现开机错误&#xff0c;适当将dc的兼容版本改低&#xff0c;我的vmware workst…
阅读更多...
Vue事件处理之v-on

Vue事件处理之v-on

1. 使用及定义 定义方法 function 方法名称(接受的event或是什么都不写) {//不管方法后括号内写与不写event,都可以接受到方法内表达式 }//定义一个接受参数的方法,此时也会在传入event function 方法名称(传入参数) {//可接受传入参数与event方法内表达式 } //定义一个接受参…
阅读更多...
说一下 JVM 有哪些垃圾回收器？

说一下 JVM 有哪些垃圾回收器？

如果说垃圾收集算法是内存回收的方法论&#xff0c;那么垃圾收集器就是内存回收的具体实现。下图展示了7种作用于不同分代的收集器&#xff0c;其中用于回收新生代的收集器包括Serial、ParNew、Parallel Scavenge&#xff0c;回收老年代的收集器包括SerialOld、Parallel Old、C…
阅读更多...
恒创科技：香港服务器和香港云服务器哪个好啊？

恒创科技：香港服务器和香港云服务器哪个好啊？

"香港服务器"和"香港云服务器"&#xff0c;是两种不同的香港区域的服务器&#xff0c;免备案&#xff0c;都有各自的优势和适用场景&#xff0c;取决于您的需求和预算。以下是它们的一些区别和特点&#xff1a; 香港服务器&#xff1a; 物理服务器&#xf…
阅读更多...
第2.5章 StarRocks表设计——行列混存表

第2.5章 StarRocks表设计——行列混存表

注&#xff1a;本篇文章阐述的是StarRocks- 3.2.3版本的行列混存表 一、概述 1.1 背景 StarRocks 基于列存格式引擎构建&#xff0c;在高并发场景&#xff0c;用户希望从系统中获取整行数据。当表宽时&#xff0c;列存格式将放大随机IO和读写。自3.2.3开始&#xff0c;StarRo…
阅读更多...
密码算法简单整理

密码算法简单整理

密码组成 国外的密码算法&#xff1a; DES、3DES、AES、SHA1、SHA2、SHA3、DSA、RSA、RC4等 高危密码算法&#xff1a; MD5、DES、RSA1024以下、SSH1.0、SSL3.0以下、SHA1等 密码算法通常可分为三大类&#xff1a; 对称密码算法 非对称密码算法 密码杂凑算法 1.对称密码算法&am…
阅读更多...
LeetCode 1637.两点之间不包含任何点的最宽垂直区域

LeetCode 1637.两点之间不包含任何点的最宽垂直区域

给你 n 个二维平面上的点 points &#xff0c;其中 points[i] [xi, yi] &#xff0c;请你返回两点之间内部不包含任何点的 最宽垂直区域 的宽度。 垂直区域 的定义是固定宽度&#xff0c;而 y 轴上无限延伸的一块区域&#xff08;也就是高度为无穷大&#xff09;。 最宽垂直区…
阅读更多...
udp服务器【Linux网络编程】

udp服务器【Linux网络编程】

目录 一、UDP服务器 1、创建套接字 2、绑定套接字 3、运行 1&#xff09;读取数据 2&#xff09;发送数据 二、UDP客户端 创建套接字&#xff1a; 客户端不用手动bind 收发数据 处理消息和网络通信解耦 三、应用场景 1、服务端执行命令 2、Windows上的客户端 3…
阅读更多...
2278. 企鹅游行（最大流，拆点）

2278. 企鹅游行（最大流，拆点）

活动 - AcWing 在南极附近的某个地方&#xff0c;一些企鹅正站在一些浮冰上。 作为群居动物&#xff0c;企鹅们喜欢聚在一起&#xff0c;因此&#xff0c;它们想在同一块浮冰上会合。 企鹅们不想淋湿自己&#xff0c;所以它们只能利用自己有限的跳跃能力&#xff0c;在一块块…
阅读更多...
UnityWebGL 设置全屏

UnityWebGL 设置全屏

这是Unity导出Web默认打开的页面尺寸 修改后效果 修改 index.html 文件 1.div元素的id属性值为"unity-container"&#xff0c;宽度和高度都设置为100%&#xff0c;意味着该div元素将占据整个父容器的空间。canvas元素的id属性值为"unity-canvas"&#xff…
阅读更多...
论文阅读——SimpleClick

论文阅读——SimpleClick

SimpleClick: Interactive Image Segmentation with Simple Vision Transformers 模型直接在VIT上增加交互是分割 用VIT MAE方法训练的预训练权重 用交互式分割方法微调&#xff0c;微调流程&#xff1a; 1、在当前分割自动模拟点击&#xff0c;没有人为提供的点击 受到RITM启发…
阅读更多...
uni-app nvue vue3 setup中实现加载webview,解决nvue中获取不到webview实例的问题

uni-app nvue vue3 setup中实现加载webview,解决nvue中获取不到webview实例的问题

注意下面的方法只能在app端使用&#xff0c; let wv plus.webview.create("","custom-webview",{plusrequire:"none", uni-app: none, width: 300,height:400,top:uni.getSystemInfoSync().statusBarHeight44 }) wv.loadURL("https://ww…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023