前端（二）之 CSS

张率功发布于2019-04-23 13:08 / 1193人阅读

摘要：前端之前端之前言前言昨天学习了标记式语言，也就是无逻辑语言。今天学习，被称之为网页的化妆师。为前端页面的样式，由选择器作用域与样式块组成。年初，组织负责的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了年月出版的规范第二版。

前端之 CSS

前言

昨天学习了标记式语言，也就是无逻辑语言。了解了网页的骨架是什么构成的，了解了常用标签，两个指令以及转义字符；其中标签可以分为两大类：

一类是根据标签内容可以分类单双标签，单标签指的是不需要字内容，标签就可以代表所有功能；双标签：主内容可以包含文本，也可以包含子标签（具有作用域）；
另一类是根据标签显示的效果可以分为行块标签，块标签会换行显示；行标签会同行显示。

今天学习 CSS，被称之为网页的化妆师。

什么是 CSS

CSS 全称为级联样式表（Cascading Style Sheet），主要负责页面的风格设计，样式、美观。通常以.css 后缀结尾。

标记语言

和 html 一样是非编程语言，不具备语言的程序逻辑。
css 为前端页面的样式，由选择器、作用域与样式块组成。

选择器：由标签、类、id 多带带或组合出现；

作用域：一组大括号包含的区域；

样式块：满足 css 连接语法的众多样式。
css 发展史代表版本

① 1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。
② 1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯（Bert Bos）正在设计一个名为Argo的浏览器，于是他们决定一起设计CSS。
③ 哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年的www网络会议上CSS又一次被提出，博斯演示了Argo浏览器支持CSS的例子，哈肯也展示了支持CSS的Arena浏览器。
④ 1997年初，W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。
⑤ CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

CSS 书写语法

css 由三部分组成：选择器、作用域与样式块。

选择器 {
    样式1: 值1;
    样式2: 值2;
}

h3 {
    width: 100px;
    height: 100px;
    background-color: yellowgreen
}

CSS 的三种引入方式

第一种引入方式：行间式

特点：

书写在标签的 style全局属性中；
样式格式为=》key：value（单位）；
以分号隔开多个样式；
最后的分号可以省略




    
    css 三种引入第一种引入


    
    css 第一种引入行间式

第二种引入方式：内联式

特点：

样式书写在 head 标签内的 style 属性内；
样式格式为 => 选择器：p|作用域 {}|样式块；
以分号隔开多个样式；
最后的分号可以省略



    
        
        css 三种引入第二种引入
        
        
    
    
        
            css 第二种引入内联式引入

第三种引入方式：外联式

特点：

书写在外部的 css文件中，不需要书写任何标签；
其他同上

/*css 文件书写 css 语法*/
/*外部 css 文件 00.css*/
h3 {
    width: 100px;
    height: 100px;
    background-color: yellowgreen
}



   
    
    第三种引入外联式引入
    
       
           第三种引入外联式引入

CSS 三种引入方式的优先级

三种可以同时存在并协同完整布局，三种引入方式之间没有优先级之说，哪种引入方式在逻辑下方（后解释的）谁就起作用（样式覆盖）。并且行间式一定是逻辑最下方的。

当三种引入方式同时存在且操作同一对象的同一属性时，才会出现冲突，最终起作用的就是优先级高的。

/*o4.css*/
div {
    height: 200px;
    color: brown;
}

基础选择器




    
    基础选择器

长度单位与颜色




    
    长度单位与颜色

文本样式操作




    
    文本样式操作
    

    


    [普通文本]
    i的文本
     一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五
    
     一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二
    
    hello world hello world
    aaa

display

GPU云服务器云服务器前端css css前端前端css框架浮动-前端-css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1468.html

前端学习之路之CSS （二）

摘要：选择器选择器可以为标有特定的元素指定特定的样式中选择器以来定义。选择器选择器用于描述一组元素的样式，选择器有别于选择器，可以在多个元素中使用在中，类选择器以一个点号显示。 Infi-chu: http://www.cnblogs.com/Infi-chu/ id选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式,CSS 中 id 选择器以 # 来定义。 #id_n...

wapeyang 2019-04-23 13:22 评论0 收藏0
前端基础-CSS是什么？

阅读目录一、什么是CSS 二、为何要用CSS 三、如何使用CSS 一、什么是CSS CSS全称CascadingStyleSheet层叠样式表，是专用用来为HTML标签添加样式的。样式指的是HTML标签的显示效果，比如换行、宽高、颜色等等层叠属于CSS的三大特性之一，我们将在后续内容中介绍表指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里二、为何要用CS...

番茄西红柿 2019-04-23 13:41 评论0 收藏0
前端每周清单第 41 期 : Node 与 Rust、OpenCV 的火花，网络安全二三事

摘要：的网站仍然使用有漏洞库上周发布了开源社区安全现状报告，发现随着开源社区的日渐活跃，开源代码中包含的安全漏洞以及影响的范围也在不断扩大。与应用安全是流行的服务端框架，本文即是介绍如何使用以及其他的框架来增强应用的安全性。 showImg(https://segmentfault.com/img/remote/1460000012181337?w=1240&h=826); 前端每周清单专注...

syoya 2019-08-21 17:48 评论0 收藏0
[面试专题]一线互联网大厂面试总结

摘要：道阻且长啊前端面试总结前端面试笔试面试腾讯一面浏览器工作原理浏览器的主要组件包括用户界面包括地址栏后退前进按钮书签目录浏览器引擎用来查询及操作渲染引擎的接口渲染引擎渲染界面和是基于两种渲染引擎构建的，使用自主研发的渲染引擎，和都使用网络用来道阻且长啊TAT(前端面试总结) 前端面试笔试面试腾讯一面 1.浏览器工作原理浏览器的主要组件包括：用户界面－包括地址栏、后退/前...

lemanli 2019-08-02 15:57 评论0 收藏0
[面试专题]一线互联网大厂面试总结

摘要：道阻且长啊前端面试总结前端面试笔试面试腾讯一面浏览器工作原理浏览器的主要组件包括用户界面包括地址栏后退前进按钮书签目录浏览器引擎用来查询及操作渲染引擎的接口渲染引擎渲染界面和是基于两种渲染引擎构建的，使用自主研发的渲染引擎，和都使用网络用来道阻且长啊TAT(前端面试总结) 前端面试笔试面试腾讯一面 1.浏览器工作原理浏览器的主要组件包括：用户界面－包括地址栏、后退/前...

xfee 2019-08-21 11:53 评论0 收藏0