CSS引入方式与文本属性
2024-04-20 05:26:25
CSS引入方式与文本属性
- 引入方式
- 内部样式表
- 行内样式表
- 外部样式表
- 文本属性
- 文本对齐
- 文本缩进
- 文本颜色
- 行间距
- 装饰文本
引入方式
内部样式表
<!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.0"><title>内部样式表</title><style>div {color: red;}/* style 可以放到任何地方 但一般放在head标签中 */</style>
</head>
<body><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.0"><title>行内样式表</title>
</head>
<body><div>溯琳真帅</div><div style="color: red; font-size: 30px;">溯琳真帅</div><!-- 注意行内样式的格式 --><div>溯琳真帅</div>
</body>
</html>
外部样式表
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.0"><title>外部样式表</title><link rel="stylesheet" href="style.css"><!-- 第二种方式<style>@import url(style.css);</style> -->
</head>
<body><div>溯琳真帅</div><div id="div1">溯琳真帅</div><div>溯琳真帅</div>
</body>
</html>
css
#div1 {color: red;
}
文本属性
文本对齐
<!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.0"><title>文本对齐</title><style>h1 { /*居中对齐*/text-align: center;}h2 { /*左对齐*/text-align: left;}h3 { /*右对齐*/text-align: right;}</style>
</head>
<body><h1>溯琳真帅</h1><h2>溯琳真帅</h2><h3>溯琳真帅</h3>
</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.0"><title>文本缩进</title><style>p {/* 文本第一行缩进多少距离 *//* text-indent: 20px; *//* em一个文字大小 */text-indent: 2em;}</style>
</head>
<body><p>中国专业IT社区CSDN (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。</p><p>旗下拥有：专业的中文IT技术社区： CSDN.NET；移动端开发者专属APP： CSDN APP、CSDN学院APP；新媒体矩阵微信公众号：CSDN资讯、程序人生、GitChat、CSDN学院、AI科技大本营、区块链大本营、CSDN云计算、GitChat精品课、人工智能头条、CSDN企业招聘；IT技术培训学习平台： CSDN学院；技术知识移动社区： GitChat；IT人力资源服务：科锐福克斯；高校IT技术学习成长平台：高校俱乐部。</p>
</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.0"><title>文本颜色</title><style>div {color: red;}</style>
</head>
<body><div>溯琳真帅</div><!-- 色值有：预定义的色值，如red,greed,blue......十六进制的 #FF0000，#F6666,......RGB代码 rgb(255，255,255)或rgb(100%,0%,100%)开发中常用十六进制-->
</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.0"><title>行间距</title><style>.p1 {line-height: 50px;}</style>
</head>
<body><p>溯琳真帅</p><p class="p1">溯琳真帅</p><p>溯琳真帅</p><p>溯琳真帅</p><p>溯琳真帅</p>
</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.0"><title>装饰文本</title><style>/* 下划线 */#div1 {text-decoration: underline;}/* 删除线 */#div2 {text-decoration: line-through;}/* 上划线 */#div3 {text-decoration: overline;}/* 取消a标签的默认下划线 */a {text-decoration: none;}</style>
</head>
<body><div id="div1">溯琳真帅</div><div id="div2">溯琳真帅</div><div id="div3">溯琳真帅</div><a href="#">溯琳真帅</a>
</body>
</html>
CSS引入方式与文本属性相关推荐
- CSS选择器/CSS字体文本属性/CSS引入方式/案例
CSS 1.CSS简介 1.1 HTML的局限性 虽然 HTML 可以做简单的样式,但是带来的是无尽的臃肿和繁琐 1.2 CSS-网页的美容师 CSS 是层叠样式表 ( Cascading Style ...
- css学习（第一天）（css基础选择器，css字体属性，css文本属性，css引入方式）
CSS第一天 1.css简介 1.1 html的局限性 1.2 css-网页的美容师 1.3 css语法规范 1.4 css代码风格 1.4.1 样式格式书写 1.4.2 样式大小写风格 1.4.3 ...
- CSS知识点整理(代码示例参考w3shool）（包括CSS概念语法作用、CSS引入方式、CSS背景、文本、字体、链接、轮廓、表格、常用选择器等）
文章目录 CSS简介 CSS 概念 CSS 作用 CSS 语法 CSS引入方式 1.内联样式表 2.内部样式表 3.外部样式表 CSS常用样式 CSS背景 1.背景色:background-color ...
- 【CSS】CSS 层叠样式表 ② ( CSS 引入方式 - 内嵌样式 )
文章目录 一.CSS 引入方式 - 内嵌样式 1.内嵌样式语法 2.内嵌样式示例 3.内嵌样式完整代码示例 4.内嵌样式运行效果 一.CSS 引入方式 - 内嵌样式 1.内嵌样式语法 CSS 内嵌样式 ...
- 【CSS】CSS 层叠样式表 ① ( 简介 | CSS 引入方式 - 内联样式 | 内联样式语法 | 内联样式缺点 )
文章目录 一.CSS 层叠样式表 二.CSS 引入方式 - 内联样式 1.内联样式语法 2.内联样式缺点 3.内联样式代码示例 ① 核心代码示例 ② 完整代码示例 ③ 执行结果 一.CSS 层叠样式表 ...
- 【使用DIV+CSS重写网站首页案例】CSS引入方式
CSS引入方式(3种) *就近原则:行内引入可以覆盖内部引入的效果 内部引入: * type="text/css" 为默认可以不写 例子: 1 <!DOCTYPE ...
- 简述在html中加入css方法,CSS引入方式 - CSS | 绿叶学习网
想要在一个页面引入CSS,共有以下3种方式. (1)外部样式表 (2)内部样式表 (3)行内样式表 一.外部样式表 外部样式表是最理想的CSS引入方式.在实际开发中,为了提升网站的性能速度和可维护性, ...
- CSS引入方式-内部样式表、行内样式表、外部样式表
CSS引入方式 内部样式表(嵌入式) 内部样式表就是将CSS在写html页面内部.是将所有的CSS代码抽取出来,单独放到一个<style>标签中.例如: <style>div{ ...
- 前端学习——CSS初学__5 CSS引入方式、新闻页面案例及Chrome调试工具
一.CSS引入方式 按照CSS书写的位置(或者引入方式)的不同,CSS样式表可以分为三类: 1.行内样式表(行内式) 行内样式表是在元素标签内部的style属性中设定CSS样式,适用于修改简单样式. ...
最新文章
- WM8962 HPOUT 信号强度 时间周期
- Linux系统时间函数
- Fragment 生命周期：
- java 8 并行_Java 8新特性之 并行和并行数组（八恶人-8）
- linux中的ip地址范围,linux – ip地址范围参数
- 自学python需要安装什么-自学python用什么系统好
- 当我以为这是最后一个Bug，改完就能提交了的时候
- Python规范:用用assert
- Oracle varchar2类型
- kux文件怎么打开 苹果手机如何观看kux视频
- 装黑苹果卡在苹果图标_虚拟机装MAC系统一直卡在苹果标志
- ORA-00955：名称已由现有对象使用；
- word在试图打开文件时遇到错误，一种解决办法
- 深度学习（二）——从零自己制作数据集到利用deepNN实现夸张人脸表情的实时监测（tensorflow实现）
- java 男女 相邻交换 队形_调整队形+上机编程调整男孩女孩顺序
- 余华《活着》日本版自序
- 【Linux】《Linux命令行与shell脚本编程大全 (第4版) 》笔记-Chapter16-脚本控制
- 第一次近距离观看偶像陆川--英特尔迅驰二代风尚盛典！
- 数据库高级查询题目集
- 关于VS2013/VS2019使用scanf函数等报错的解决方案