美文网首页
从屌丝到架构师的飞越(CSS篇)-CSS入门

从屌丝到架构师的飞越(CSS篇)-CSS入门

作者: 走着别浪 | 来源:发表于2019-08-09 07:52 被阅读0次

一、介绍

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力

二、知识点介绍

1、CSS入门事例

2、CSS引入

3、CSS选择器

4、CSS声明

5、CSS注释

三、上课对应视频的说明文档

1、CSS入门事例

创建一个HTML文件

2、CSS引入

➢ 外部引用CSS

➢ 内部引用CSS

➢ 内联引用CSS

A、外部引入CSS

CSS外部引用使用了外接的CSS文件,一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件.

外部引用相对于内部引用和内联引用来说是高效的是节省宽带的.

外部引用是W3C推荐使用的.

外部引用CSS是最好的引入CSS的方式(可以使代码量最小,表现最统一,也是标准网页设计推荐的).

方法一:link引入

方法二:@import引入

B、内部引用CSS

可以使用style标签直接把CSS文件中的内容加载到HTML文档内部。

C、内联引用CSS

内联引用可以把CSS样式直接作用在HTML标签中。

3、CSS选择器

CSS选择符就是CSS样式的名字,当在HTML文档中表现一个CSS样式的时候,就要用到一个CSS.怎么用呢?这时就通过CSS选择符(CSS的名字)来指定此HTML标签使用此CSS样式

A、CSS选择符结构

B、CSS选择符的命名规则

CSS选择符可以使用英文字母的大写与小写,数字,连字号,下划线,冒号,句号.

英文字母大写与小写 A-Z a-z

数字 0-9

连字号 -

下划线 _

冒号 :

句号 .

C、CSS常用的三种选择符

标签选择符,比如 p标签选择符(代表所有的段落都使用这个CSS样式),比如  p{font-size:12px;}

id选择符,唯一性选择符,比如 #dreamdured{color:red;},就是在名字前增加了一个#,id选择符在一个页面中只能出现一次,在整个网站中也最好出现一次(这样有利于程序员控制此元素,有多个一样名称的元素,就无法分开不好控制了).

class选择符,多重选择符,比如.dreamdublue{color:blue;},就是在名字前增加了一个.,class选择符在一个页面中可以出现多次(注意下面的示例中class选择符的用法)

4、CSS声明

CSS声明是由"属性","冒号(:)","属性值"和"分号(;)"组成的。

A、CSS声明技巧一

选择符中定义的最后一个声明,声明后的分号可以省略

B、CSS声明技巧二

选择符的名字一样,声明是可以组合的

C、CSS声明技巧三

声明全部一样,选择符的名字也可以组合

5、CSS注释

CSS注释的开始使用 /*,结束使用*/

相关文章

网友评论

      本文标题:从屌丝到架构师的飞越(CSS篇)-CSS入门

      本文链接:https://www.haomeiwen.com/subject/suiorctx.html