从零开始学 Web 之 CSS(二)文本、标签、特性-阿里云开发者社区

开发者社区> daotin> 正文

从零开始学 Web 之 CSS(二)文本、标签、特性

简介: 大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
+关注继续查看

大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!


一、文本元素

1、属性

font-size: 50px;         /*文字大小*/
font-weight: 700;       /*值从100-900,文字粗细,700约等于Bold,不推荐使用font-weight:bold; */
font-family:微软雅黑;    /*文本的字体*/
font-style: normal | italic;  /*normal:默认值  italic:斜体*/
line-height: 50px            /*行高*/

2、文本属性连写

/* 格式:font: font-style font-weight  font-size/line-height  font-family; */
font: italic 700 50px/40px  微软雅黑;

注意:font:后边写属性的值。一定按照书写顺序。
PS:文本属性连写中文字大小和字体为必写项。

3、文字的表达方式

1. 直接写中文名称

font-family: 微软雅黑;

2. 写字体的英文名称

font-family: microsoft yahei;

3. unicode 编码(解析更快)

img_7a5bc28730c124deabcde37017c0911d.png

如何找到某一字体相对应的unicode编码呢?

第一步:一般打开浏览器,按F12
第二步:找到console
第三步:输入escape(“宋体”); 注意英文的括号和双引号。

img_d80210b4da5c5a0d374d8aafbada8de4.png


二、样式表书写位置

  • 内嵌式写法
<head>
<style type="text/css">
    /*样式表写法*/
</style>
</head>
  • 外链式写法
<link rel="stylesheet" href="1.css"> <!--写在head里-->
  • 行内样式表
<div style="font-size: 30px; color:red;">行内样式表</div>

三种写法特点:
内嵌式写法:样式只作用于当前文件,没有真正实现结构表现分离。
外链式写法:作用范围是当前站点,谁调用谁生效,范围广,真正实现结构表现分离。
行内样式表:作用范围仅限于当前标签,范围小,结构表现混在一起。 (不推荐使用)


三、标签分类

1、块元素

/*典型代表:*/ div, h1-h6, p, ul, li

特点:
1.独占一行;
2.可以设置宽高;
3.嵌套(包含)下,子块元素宽度(没有定义情况下)和父块元素宽度默认一致。

2、行内元素

/*典型代表*/ span, a, strong, em, del, ins

特点:
1.在一行上显示;
2.不能直接设置宽高(需要转行内块);
3.元素的宽和高就是内容撑开的宽高。

3、行内块元素(内联元素)

/*典型代表*/  input, img

特点:
1.在一行上显示;
2.可以设置宽高。

4、三者相互转换

1. 块元素转行内元素

display:inline;

2. 行内元素转块元素

display:block;

3. 块和行内元素转行内块元素(用的最多)

display:inline-block;

四、CSS三大特性

1、层叠性

当多个样式作用于同一个(同一类)标签时,样式发生了冲突,总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。

img_8da93220b402415240c339187398df89.png

2、继承性

继承性发生的前提是包含(嵌套关系)
文字颜色可以继承
文字大小可以继承
字体可以继续
字体粗细可以继承
文字风格可以继承
行高可以继承
总结:文字的所有属性都可以继承。

特殊情况:

  1. h系列不能继承文字大小。(继承了但是不显示)

实际上:h1显示的是你设置的 font-size * 2;
h2显示的是:你设置的 font-size * 1.5
.......

  1. a链接标签不能继承文字颜色(继承了但是不显示,链接标签默认是蓝色)

3、优先级

 默认样式 < 标签选择器 < 类选择器 < id选择器 < 行内样式< !important  
 权重:      0         1            10        100      1000     1000以上

PS:这里的数字不是准确的,实际上100个标签选择器叠加的权重也比不过一个类选择器的权重。

img_68ee88c1fcffd451735450f4e69d608f.png

特点:

1.继承的权重为0(当没有自己的样式时,听继承的;有自己的样式时,继承的权重为0)
2.权重会叠加。

img_2ca49ee424cbe333a466b2ab8260d602.png

(上图:类选择器10+标签选择器1=11,所以最后14期威武显示的是黄色)

img_5cea7fbfaf006908d9d10f682429edff.png

img_8f4974f9a377caa3950c3934201cf746.png


img_964e5550b9dc423fcb4297d85f09ac10.png


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用jQuery和CSS3实现的“加载中”效果按钮 极客标签 - 做最棒的极客知识分享平台
来源:http://www.gbtags.com/gb/share/2812.htm#193972-hi-1-18016-20bb88bda5c2677bbca01e6631afa70a
652 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
8408 0
从零开始学 Web 之 JavaScript(三)函数
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1202 0
从零开始学习 asp.net core 2.1 web api 后端api基础框架(三)-创建Data Transfer Object
原文:从零开始学习 asp.net core 2.1 web api 后端api基础框架(三)-创建Data Transfer Object 版权声明:本文为博主原创文章,未经博主允许不得转载。
816 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10192 0
从零开始学 Web 之 JavaScript(四)数组
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1017 0
JavaWeb学习之路(16)–HTML之标签的属性与内容
本文目录 1. 前言 2. 标签的内容 3. 标签的属性 4. 标签的格式 5. 小结
11 0
bboss国际化标签小常识-基础数据国际化案例
bboss国际化标签小常识-基础数据国际化案例 一般所说的国际化都是指表示层页面显示信息的国际化,但是有些情况下,业务系统中的一些基础数据也需要做国际化,本文举一个简单的例子来说明bboss国际化标签如何实现基础数据的国际化。
645 0
Web---JSTL(Java标准标签库)-Core核心标签库、I18N国际化、函数库
前面为JSTL中的常用EL函数,后面的为具体演示实例! JSTL简介: JSTL(Java Standard Tag Library) –Java标准标签库。 SUN公司制定的一套标准标签库的规范。
1019 0
+关注
daotin
一个嵌入式工程师转型 Web 前端的学习之路。
81
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载