文档章节

CSS简介

o
 osc_n6euf5h6
发布于 2019/03/20 07:48
字数 829
阅读 27
收藏 0
red

「深度学习福利」大神带你进阶工程师,立即查看>>>

一:CSS概述

(1)CSS是指层叠样式表,这些样式定义如何显示HTML元素。这是由于如果是一个大型的网页,所有代码都写在一个HTML文件里面的话,会很不容易管理,同时代码的简洁度也不够,所以讲HTML文件内相同的样式提取出来,写到专门的CSS文件内,在通过引用的方式得以展现,大大提高了代码的复用率,提高了整体开发的效率。

(2)CSS语言的特点主要有这几个特点,丰富的样式定义,CSS提供了丰富的文档样式外观;易于使用和修改,CSS可以将样式定义在HTML元素的style属性中,也可以定义在HTML文档的header部分,还可以定义在专门的CSS文件中,供HTML文件引用。修改是只需要修改定义的那部分代码,不需要修改所以使用这个样式的标签。易于管理,CSS可以将相同样式的元素进行归类,使用同一个样式进行定义,也可以将某个样式应用到所有同名的HTML标签中,也可以将一个CSS样式指定到某个页面元素中。如果要修改样式,我们只需要在样式列表中找到相应的样式声明进行修改。多页面应用,CSS样式可以供任何页面文件都可以将其引用。页面压缩,样式声明在CSS样式表中,可以大大的减少HTML页面的内容,减少页面加载的时间。

 

二:多重样式层叠为一个

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

主要有三种样式表:外部样式表、内部样式表、内嵌样式表,其中,内嵌样式表拥有最高的优先权

1、内嵌样式
内嵌样式是把css的代码嵌入到html标签中
<div style="color:red;font-size: 100px;">你好啊 小朋友</div>
语法:
(1)使用style属性将样式嵌入到html标签中
(2)属性的写法:属性:属性值
(3)多个属性之间使用分号;隔开

2、内部样式
在head标签中使用style标签进行css的引入
<style type="text/css">
div{color:red;font-size: 100px;}
</style>
语法:
(1)使用style标签进行css的引入
<style type="text/css">
属性:type:告知浏览器使用css解析器去解析
(2)属性的写法:属性:属性值
(3)多个属性之间使用分号;隔开

 

3、外部样式
将css样式抽取成一个单独css文件 谁去使用谁就引用
<link rel="stylesheet" type="text/css" href="demo1.css"/>
语法:
(1)创建css文件 将css属性写在css文件中
(2)在head中使用link标签进行引入
<link rel="stylesheet" type="text/css" href="css文件地址"/>
rel:代表要引入的文件与html的关系
type:告知浏览器使用css解析器去解析
href:css文件地址
(3)属性的写法:属性:属性值

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
CSS Browser Selector

CSS Browser Selector 是一个小的 JS 库,可增强 CSS 的选择器功能,支持根据不同的操作系统和浏览器来编写指定的 CSS 代码,可检测浏览器、浏览器版本、平台、平台版本、设备、设备版本、m...

匿名
2013/01/17
2.8K
1
Web开发组件管理器--Bower

Bower 是一个针对Web开发的包管理器。该工具主要用来帮助用户轻松安装CSS、JavaScript、图像等相关包,并管理这些包之间的依赖。 功能有些类似于Component。不同之处是,Component是围绕Git...

匿名
2013/02/01
1.2W
2
网页抓取工具 --pyrailgun

这是一个非常简单易用的抓取工具 怎么使用? 首先你需要创建一个对应站点的规则文件 比如test.json { } 然后在代码里面把它作为一个任务加入到railgun from railgun import RailGun railgun =...

baizhongwei
2013/02/28
7.8K
0
开源数据访问组件--Smark.Data

Smark.Data是基于Ado.net实现的数据访问组件,提供基于强类型的查询表达式进行灵活的数据查询,统计,修改和删除等操作;采用基于条件驱动的操作模式,使数据操作更简单轻松;内部通过标准SQL...

泥水佬
2013/03/12
2.6K
0
Chrome页面自动刷新插件--smartF5

smartF5是一款chrome插件,用以实现监控页面资源,并自动刷新。 特别适合双屏情况下的DEMO开发,大大提高页面开发效率。 让你键盘上的F5键退休吧! 为什么选择smartF5 本插件具有以下特色: ...

YanisWang
2013/04/04
1.2W
0

没有更多内容

加载失败,请刷新页面

加载更多

大数据研发学习之路--Hadoop集群搭建

阅读编译文档 准备一个hadoop源码包,我选择的hadoop版本是:hadoop-2.7.7-src.tar.gz,在hadoop-2.7.7的源码 包的根目录下有一个文档叫做BUILDING.txt,这其中说明了编译hadoop所需要的一些...

DSJ-shitou
41分钟前
8
0
OSChina 周五乱弹 —— 特么是别的公司派来的特洛伊木马吧?

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 小小编辑推荐:《我会守在这里》- 毛不易 《我会守在这里》- 毛不易 手机党少年们想听歌,请使劲儿戳(这里) @FalconChen :股市连跪了五天,...

小小编辑
42分钟前
55
2
如何在find中排除目录。命令 - How to exclude a directory in find . command

问题: I'm trying to run a find command for all JavaScript files, but how do I exclude a specific directory? 我正在尝试为所有JavaScript文件运行find命令,但是如何排除特定目录? ......

法国红酒甜
今天
73
0
《Java8实战》笔记(02):通过行为参数传递代码

本文源码 应对不断变化的需求 通过筛选苹果阐述通过行为参数传递代码 初试牛刀:筛选绿苹果 public static List<Apple> filterGreenApples(List<Apple> inventory){List<Apple> result = ......

巨輪
今天
19
0
JeeSite 4 架构特点、安全方面、为什么好、工匠精神、不忘初心

1、底层架构 以 Spring Boot 2 为基础,Maven 多项目依赖,模块分项目,松耦合,方便模块升级、增减模块。 模块化的数据库自动升级程序,当模块升级代码需要更新数据库时,自动执行对应版本 ...

ThinkGem
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部