补充：HTML标签和CSS
角标标签：
上角标：sup
下角标：sub
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>角标</title>
</head>
<body>
x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup>
<br />
H<sub>2</sub>O
</body>
</html>
文本加粗：
b标签
strong加强版文本加粗，具有语气强调的特性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>加粗标签</title>
</head>
<body>
<p>夜雨染成天水碧。有些人不需要姿态，也能成就一场惊鸿。</p>
<br />
<p><b>夜雨染成天水碧。有些人不需要姿态，也能成就一场惊鸿。</b></p>
<br />
<p><strong>夜雨染成天水碧。有些人不需要姿态，也能成就一场惊鸿。</strong></p>
</body>
</html>
斜体标签：
em
i
cite主要用于修饰书名
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>斜体标签</title>
</head>
<body>
<p><em>夜雨染成天水碧。有些人不需要姿态，也能成就一场惊鸿。</em></p>
<br />
<p><i>夜雨染成天水碧。有些人不需要姿态，也能成就一场惊鸿。</i></p>
<br />
<p><cite>《西游记》</cite>这个神话，从小就喜欢。</p>
</body>
</html>
下划线标签：
u
删除线标签：
del
CSS引入方式优先级：
行内式最高，无行内式时，内嵌式和外链式遵循后定义原则（就近原则）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>引入方式优先级</title>
<!--
行内式优先级最高
在没有行内式的情况下：
内嵌式和外链式同时引入：就近原则（从上往下）
-->
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: blueviolet;
}
</style>
<!--<link rel="stylesheet" type="text/css" href="../css/main.css"/>-->
</head>
<body>
<div <!--style="width: 100px; height: 100px; background-color: chartreuse;"-->>
这是一段文字
</div>
</body>
</html>
CSS元素溢出：
属性：overflow：hidden 隐藏超出div边框部分
visible 默认（显示超出边框部分）
scroll 滚动查看隐藏的文字
auto 调用scroll方式，滚动查看隐藏的文字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素溢出</title>
<style type="text/css">
div{
width: 200px;
height: 300px;
border: 1px solid cadetblue;
/*overflow: hidden;隐藏超出边框的文字*/
/*overflow: visible;默认*/
/*overflow: scroll;滚动显示文字*/
overflow: auto;/*默认使用scroll方式*/
}
</style>
</head>
<body>
<div id="">
秋意尚浓，恍然就到了初冬，月亮也带着秋温，走进了冬的夜空。
天黑得早了，晚饭后摸黑回宿舍，过了山头，豁然见西南山坡上空这轮橙黄明净的初冬月，低垂圆满，硕大清新，一种美好亲切的感觉顿从心底漾起。夜幕中，黑森森的山峰错落而列，视野尽处，一岭横天际接晚霞；渐暗的余霞边，山的剪影如淡淡的水墨画，近山的轮廓则像浓墨涂出的一样；山坡西南出口方向，山势迅速开阔，峰峦连绵起伏，像一片黑色的波涛，磅礴在融融的月光下；月下的山坡和附近的山川上空月光旖旎，给人今月专为此处明的美感。这月光山色太美了！望着明月，似乎忘却了自身的存在，只剩下一缕美好的情感，羽化在这月色之中。
</div>
</body>
</html>
文本输出顺序标签：
bdo
dir属性：rtl倒序
ltr正序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本输出顺序bdo</title>
</head>
<body>
<!--<bdo dir="ltr">helloworld</bdo>-->
<bdo dir="rtl">helloworld</bdo>
</body>
</html>
CSS文本样式：
font-family字体
font-size字体大小
font-style修改字体风格 italic斜体
line-height行高
font-weight:bold设置加粗
上述也可简写：
font：italic bold 18px/40px ''楷体‘’；
text-decoration取出a标签默认下划线
a标签中title属性说明：
鼠标放在链接上可以提示指定信息
选择器：
①标签选择器：
影响范围较大，一般用来做一些通用的设置
②id选择器：
通过id找到元素，一个id只能作用在一个元素上，id值不能相同，使用方式：#id值{}
③类选择器：
通过类名找到标签元素，一个类名可以应用多个标签，一个标签可以使用多个类名（空格分隔多个类名），使用方式：.类名
④层级选择器（后代选择器）：
主要应用在嵌套标签中
类似#id_1 p span{}
⑤伪类选择器：
鼠标移动到元素标签，会发生设定的改变效果（用于a标签）
a:hover{
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
/*标签选择器*/
div{
width: 200px;
height: 200px;
background-color: #FF0000;
}
/*id选择器*/
#m_id{
width: 100px;
height: 100px;
background-color: green;
}
/*类选择器*/
.math{
width: 100px;
height: 100px;
color: #008000;
}
.kj{
width: 300px;
height: 300px;
background-color: aquamarine;
}
.bj{
margin: auto;
}
/*层级选择器*/
#m_id p span{
font-family: "微软雅黑";
font-size: 20px;
font-style: italic;
}
/*伪类选择器*/
a:hover{
background-color: darkturquoise;
color: red;
font-style: italic;
font-size: 30px;
text-decoration: none;
}
</style>
</head>
<body>
<div id="m_id">
我想静一静
<p class="math">晚饭后摸黑回宿舍，<span>过了山头</span>，豁然见西南山坡上空这轮橙黄明净的初冬月晚饭后摸黑回宿舍</p>
</div>
<br />
<br />
<div class="kj bj">
豁然见西南山坡上空这轮橙黄明净的初冬月晚饭后摸黑回宿舍
</div>
<br />
<a href="#" title="快来点我吧！">更多</a>
</body>
</html>
选择器优先级：
行内式>id选择器>类选择器>标签选择器
补充：HTML标签和CSS的更多相关文章
- 今天我们要说的画一个三角形，恩，画一个三角形，第一种呢是利用我们的html标签结合css来实现；而第二种方法就就是我们的html5新增的一个标签canves,这个canves就是网页画幕，那么顾名思义就是在网页里建造一个画板，用来画画，好，那接下来就和我一起去看看吧！
第一种方法:利用我们的html标签结合css来实现 span{ width:0px; height:0px; border-width:7px; border-style:solid; border- ...
- input标签写CSS时需要注意的几点（先收藏）
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-05-05) 飞鱼的声纳顶部的搜索框让我头疼了很长时间,原因是总不能获得跨浏览器的统一样式.主要的问题有这么两个:一是inpu ...
- Bootstrap入门（三）<p>标签的css样式
Bootstrap入门(三)<p>标签的css样式 前提:引入css文件,内容放在一个class为container的div中 <p>标签属性 1.“ text-left ...
- 【onclick事件】【改变 HTML 内容innerHTML】【图片替换】【改变标签的css】【判断输入是否是数字】
1.onclick事件 <button type="button" onclick="alert('Welcome!')">点击这里</but ...
- PHP使用echo输出标签设置CSS样式问题
使用php是可以输出HTML标签的,这为页面设计带来很大方便. 在此记录php输出标签设置CSS样式的问题: echo可使用''.""或你不用引号,如果想要输出带CSS样式的HTM ...
- 前端基础之CSS的引入+HTML标签选择器+CSS操作属性
clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式: ...
- day--43 HTML标签和CSS基本小结
HTML标签和CSS基本小结一:常用标签 01:块标签 p,h1--h6 ,hr ,div 02:内联标签 b,i,u,s 小提示:块标签可以嵌套内置元素或者某些块级元素,但内联元素不能包含块级元素 ...
- 后端数据中含有html标签和css样式，前端如何转译展示样式效果。
后端含有html标签和css样式的数据: domain="<span style='color:red'>www.baidu.com</span>" (vu ...
- 20190326-HTML5标签、CSS的引用
目录 1.HTML5标签 H5前的DIV+CSS布局 H5解决的问题 H5新标签header.footer.nav.aside.article.address.main.figure.figcapti ...
随机推荐
- ubuntu16.04 TLS安装java
apt-get install software-properties-commonadd-apt-repository ppa:webupd8team/javaapt-get updateapt-g ...
- Pyhthon3之使用__slots__
正常情况下,我们定义了一个class,创建了一个class实例后,我们可以给该实例绑定任何属性和方法,这就是动态语言的灵活性.先定义class: >>> class Student( ...
- ALBPM Service Config
ALBPM Config About ALBPM Studio Msg , JSP and webResources together deploy services. Msg "D ...
- spring mvc 后端获得前端传递过来的参数的方法
1.通过HttpServletRequest 获得 HttpServletRequest.getParameter(参数名),可以获得form表单中传递的参数,或ajax或url中传递过来的参数,如果 ...
- html转图片网页截屏（三），puppeteer
puppeteer谷歌出品,是一个 Node 库,它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome. 官方github地址:https://github ...
- 【VS2015软件报错】命名空间 system.windows 中不存在类型或命名空间名称 forms (是否缺少程序集引用 )错误
C#项目: 添加“using System.Windows.Forms;”之后提示“命名空间 system.windows 中不存在类型或命名空间名称 forms (是否缺少程序集引用 )”错误 详细 ...
- Egret入门学习日记 --- 第二十篇（书中 9.1~9.3 节 内容 组件篇）
第二十篇(书中 9.1~9.3 节 内容 组件篇) 第八章中的内容. 以上都是基本的Js知识,我就不录入了. 直接来看 第9章. 开始 9.1节. 以上内容告诉你,Egret官方舍弃了GUI,使用了E ...
- jsp标签在spring boot中的关键用法
<form:form modelAttribute="user" action="save" method="post" >// ...
- 方法重载，new，override
方法重载:参数列表不一样,方法名字一样,包括泛型,和返回值无关 new: 复写,方法重载 overload 继承是对于普通方法和属性 复写 父类的 override:覆盖,重写 , 对于抽象 ...
- Linux下安装redis 3.0及C语言中客户端实现demo
1.获取安装文件 wget http://download.redis.io/redis-stable.tar.gz 2.解压文件 tar xzvf redis-stable.tar.gz 3.进入目 ...