html 对p中一段话指定样式,HTML5学习笔记(二)
一.常用标签
1.< p> 标签:段落标签,用来显示一段文本
段落文本
2.< h> 标签:从 h1-h6字体越来越大.标题标签.
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
3.< em>,< strong> 强调标签.用来加强一段话中的特别几个字.需要强调的文本 需要强调的文本
4. 标签,用来设置单独样式所存在的标签.文本
5. 标签,短文本引用标签.
引用文本
6.< blockquote> 标签,用来长文本引用.
引用文本
7.< b r > 标签,换行标签,用来分行显示文本.
8.控制字符,不是一个标签,而是一个特殊字符.后面的封号不能去掉
9.< hr >标签,添加水平横线.
10.< adress>标签,为网页加入地址信息.
联系地址信息11.< code>标签,加入代码时的管理标签.NSString = [NSString stringWithFormt:@"xx"];
12.< pre>标签,大段的代码块管理的标签.
- (void)setBlock:(block)block{
objc_setAssociatedObject(self, ablock, block, OBJC_ASSOCIATION_COPY_NONATOMIC);
}
- (block)block{ return objc_getAssociatedObject(self, ablock);
}
13.< ul>标签,无序的信息列表标签.
- 信息
- 信息/
14.< ol>标签,有序的信息标签.
- 信息
- 信息
15.< div>容器标签,用来排版.
16.< caption>标签,为表格添加标题和摘要.
标题文本
17.< a>标签,链接到另外一个页面.链接显示的文本
< a>标签重要的属性 target 的值:_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self
这个目标的值对所有没有指定目标的 < a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的,除非和文档标题 标签中的 target 属性一起使用。
_ parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。
_ top
这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
18.< mailto>标签,用于在网页中链接 Email 地址.发邮件给我
注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。
19.< img>标签,为网页插入图片.
注:src:标识图像的位置;
alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
图像可以是GIF,PNG,JPEG格式的图像文件。
二.CSS
1.css 样式基本知识内联式:
写在元素的开始标签里,并且css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。
这里文字是红色。
嵌入式:
嵌入式css样式必须写在之间,并且一般情况下嵌入式css样式写在
之间。如右边编辑器中的代码。外部式:
css样式文件名称以有意义的英文字母命名,如 main.css。
rel="stylesheet" type="text/css" 是固定写法不可修改。
标签位置一般写在
标签之内。
注:在使用的过程中遵循:内联式 > 嵌入式 > 外部式和就近原则,这两个排布选取方式.
2.css选择器.标签选择器:
标签选择器其实就是 html 代码中的标签p{ font-size:12px;line-height:1.6em;
}类选择器:
类选择器在 css 样式代码中是最常见的.
.类选器名称{css样式代码;}.stress{
color:red;
}/*类前面要加入一个英文圆点*/练习
注:
1、英文圆点开头
2、其中类选器名称可以任意起名(但不要起中文噢)ID 选择器
ID 选择器类似于类选择符,但也有一些区别:
1、为标签设置id="ID名称",而不是class="类名称"。
2、ID选择符的前面是井号(#)号,而不是英文圆点(.)。#setGreen{
color:green;
}练习文本
注意:
1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。子选择器:用于选择指定标签元素的第一代子元素.
."class">标签{border:1px solid red;}.first>span{
border:1px
solid red;
}
三年级时,我还是一个胆小如鼠的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。
食物
包含(后代选择器):
."class" 标签{color:red;}
请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。
总结:>作用于元素的第一代后代,空格作用于元素的所有后代。通用选择器:通用选择器是功能强大的选择器,他使用一个(*)号指定,它的作用是匹配 html 所有标签元素.* { color:red; font-size:18px;
}伪类选择符:它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:a:hover{
color:red
}
百度
为 a 标签鼠标滑过的状态设置字体颜色变红。“百度”文字加入鼠标滑过字体颜色变为红色特效。
注:
关于伪类选择符,到目前为止,可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了(其实伪类选择符还有很多,尤其是 css3 中,但是因为不能兼容所有浏览器)。其实 :hover 可以放在任意的标签上,比如说 p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是 a:hover 的组合。分组选择符:当你想为 html 中多个标签设置同一样式,可以使用分组选择符(,).h1,span{
color:red;
}h1{
color:red;
}
span{
color:red;
}
练习文本
段落
3.css的继承,层叠和特殊性继承:CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签。p{color:red;}
三年级时,我还是一个胆小如鼠的小女孩。
p中的文本与span中的文本都设置为了红色。但注意有一些css样式是不具有继承性的。如border:1px solid red;特殊性:有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码:p{color:red;}
.first{color:green;}
三年级时,我还是一个胆小如鼠的小女孩。
p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。
下面是权值的规则:
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:p{color:red;} /*权值为1*/p span{color:green;} /*权值为1+1=2*/.warning{color:white;} /*权值为10*/p span.warning{color:purple;} /*权值为1+1+10=12*/#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。层叠:在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。如下代码"p{color:red;}
p{color:green;}
三年级时,我还是一个胆小如鼠的小女孩。
最后 p 中的文本会设置为green,这个层叠很好理解,理解为后面的样式会覆盖前面的样式。所以这就是之前提到的就近原则.
所以前面的css样式优先级就不难理解了:
内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。重要性:为某些样式设置具有最高权值.p{color:red!important;}
p{color:green;}
三年级时,我还是一个胆小如鼠的小女孩。
这时 p 段落中的文本会显示的red红色。
注意:!important要写在分号的前面
这里注意当网页制作者不设置css样式时,浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式,比如有的用户习惯把字号设置为大一些,使其查看网页的文本更加清楚。这时注意样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!important优先级样式是个例外,权值高于用户自己设置的样式。
作者:A_sura
链接:https://www.jianshu.com/p/2658913bb00b
html 对p中一段话指定样式,HTML5学习笔记(二)相关推荐
- 类的包访问权限:《Java编程思想》中一段话的困惑
类的包访问权限:<Java编程思想>中一段话的困惑 在<java编程思想第三版>(陈昊鹏 饶若楠等译)的第五章隐藏具体实现中,5.4节的最后一段话是: "正如前面所提 ...
- python3.4学习笔记(二十一) python实现指定字符串补全空格、前面填充0的方法
python3.4学习笔记(二十一) python实现指定字符串补全空格.前面填充0的方法 Python zfill()方法返回指定长度的字符串,原字符串右对齐,前面填充0. zfill()方法语法: ...
- SVO中 Inverse Compositional Image Alignment方法的学习笔记
SVO中 Inverse Compositional Image Alignment方法的学习笔记 这篇文章 光流法简介 逆向光流法 结尾 这篇文章 在SVO系统中的"Relaxation ...
- css中怎么加入立体模型,CSS学习笔记二:css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
- 删除word中一段话的空格
1 把这段话或表格粘贴到新的文档里面 2 Ctrl+H,在"查找内容"中敲入空格键,在"替换为"中什么都不输入 3 点击全部替换 4 到此完成
- groovy怎样从sql语句中截取表名_SQL基础教程学习笔记
点击上方SQL数据库开发,关注获取SQL视频教程 SQL专栏 SQL数据库基础知识汇总 SQL数据库高级知识汇总 1.数据库和SQL RDBMS:关系数据库管理系统 比较代表性的有:Oracle(甲骨 ...
- python中socket模块常用吗_python网络学习笔记——socket模块使用记录
此文章记录了笔者学习python网络中socket模块的笔记. 建议初次学习socket的读者先读一遍socket模块主要函数的介绍. socket模块的介绍可以参考笔者的前一篇关于socket官方文 ...
- linux中ftp的工作原理,Linux系统学习 十二、VSFTP服务—简介与原理
1.简介与原理 互联网诞生之初就存在三大服务:WWW.FTP.邮件 FTP主要针对企业级,可以设置权限,对不同等级的资料针对不同权限人员显示. 但是像网盘这样的基本没有权限划分. 简介: FTP(Fi ...
- pandas整表写入excel指定位置_Pandas学习笔记——读写Excel文件
一.环境准备 Windows10 python3.6.5 pandas:可以使用pip进行安装( pip install pandas ) 开发工具:Anaconda或者PyCharm 数据准备: ...
最新文章
- Linux(centos6.0)下安装Node.js以及使用
- 【转】关于编译链接——gcc/g++
- Object-C 入门介绍
- Mac 技术篇-mac远程桌面直接连接windows系统,微软官方工具Microsoft Remote Desktop远程桌面工具安装与使用
- 搭建一个自己的SVN服务器
- Page Cache的落地问题
- 写程序,流程图很重要!
- 搭建keepalived遇到的问题
- VS2017(64位) Win32_Interop.lib ws2_32.lib 函数重定义
- windows 安装msi 出现报错 2503 无权限 使用cmd模式安装
- 计算机发送到桌面快捷方式,win10系统右键菜单“发送到桌面快捷方式”选项不见了的详细步骤...
- 考研英语大纲单词E~O与常用短语
- 指向性麦克风----8字形麦克风设计(四)
- 单片机音乐盒c语言源程序,51单片机八音盒源程序(汇编语言)
- 接口文档——Swagger
- 关于人工神经网络的论文,人工神经网络参考文献
- 沙龙与华为强强携手,机甲龙惊艳广州车展
- 原创:Eclipse 上网代理设置(亲测有效)
- 小米台灯突然自己亮了_升级版值不值得买?米家台灯1代1S对比测评
- nginx鉴权之后查看pdf报错未能加载pdf文档
热门文章
- 谈一谈游戏AI - 行为树
- 下载神器aria2和他的客户端Persepolis
- 【BZOJ 1062】 1062: [NOI2008]糖果雨 (二维树状数组)**
- Python从放弃到入门,公众号历史文章爬取成pdf的项目实践与自主学习法
- 分享推荐国产串口PSRAM外扩芯片EMI7064LSME
- 公告或通知的未读 设计(MySQL Redis)
- 【面试题】网易互娱(游戏)2021校园招聘在线笔试 - 服务端开发工程师[螺旋矩阵]
- DDD基础 (实体 值对象)
- 子平真诠释疑笔记(二)
- Word Embedding 知识总结