文档章节

CSS3概述

猪刚烈
 猪刚烈
发布于 2014/09/12 16:59
字数 854
阅读 29
收藏 0

一个美观、大方、简约的页面和高访问量的网站,是网页设计者的追求。然而,仅通过HTML5实现是非常困难的,HTML仅定义了网页结构,对于文本样式没有过多涉及。这就需要一种技术对页面布局、字体、颜色、背景和其他图文效果的实现提供更加精确的控制,这种技术就是CSS3。

1、编辑和浏览CSS

css基本语法:

每一条样式规则由三部分构成:选择符(selector)、属性(properties)和属性值(value),基本格式如下:

selector{property:value}

下面给出一条样式规则,如:

p{color:red;font-size:40px}

2、编写CSS

选中标签内的文字,右击并在弹出的快捷菜单中选择【CSS样式】<【新建】命令,然后根据提示操作。

3、在HTML5中使用CSS3的方法

CSS样式表能很好的控制页面显示,以达到分离网页内容和样式代码。CSS样式表控制HTML5页面达到好的样式效果,其方式通常包括行内样式、内嵌样式、链接样式和导入样式。

行内样式:

即直接在HTML标记中使用style属性,该属性的内容就是CSS的属性和值。例如:

<p style="color:red;font-size:20px">此段落使用行内样式修饰</p>

总结:如果需要每一个标记都设置style属性,后期维护成本高,网页容易过胖,故不推荐使用。

内嵌样式:

即将CSS样式代码添加到<head></head>之前,并且用<style></style>标记进行声明。

其格式如下:

<head>

<style type="text/css">

p{

color:orange;

text-align:center;

          }

</style>

</head>

总结:如果一个网站,拥有很多页面,对于不同页面的<p>标记都希望采用同样的风格时,内嵌演示就显得有点麻烦。此方式只适用于特殊页面设置单独的样式风格。

链接样式:

链接样式是CSS中使用频率最高也是最实用的方法。它很好地将“页面内容”和“样式风格代码”分离成两个或多个文件。

链接样式是指在外部定义CSS样式表并形成以.css为拓展名的文件,然后在页面中通过<link>链接标记链接到页面中,而且该链接语句必须放在页面的<head>标记区,如下:

<link rel="stylesheet" type="text/css" herf="1.css">

总结:链接样式最大优势就是将CSS代码和HTML代码完全分离,并且同一个CSS文件能够被不同的HTML所链接使用。

导入样式:

导入样式和链接样式基本相同,都是创建一个单独CSS文件,然后再引入到HTML文件中。只不过语法和运作方式有差别。

导入样式是指在内部样式表<style>标记中,使用@improt导入一个外部样式表,例如:

<head>

<style type="text/css">

@import "1.css"

</style>

</head>

总结:导入方式与链接方式相比较,最大的优点就是可以一次导入多个CSS文件,其格式如下:

<style>

@inport "3.6.css"

@inport "test.css"

</style>

4、优先级问题

如果同一个页面,同时采用了上面四种方式,就会出现优先级问题,他们的优先级如下:

行内样式>内嵌样式>链接样式>导入样式


本文转载自:http://blog.csdn.net/xiao1ni1zi/article/details/8894962

猪刚烈
粉丝 22
博文 708
码字总数 110
作品 1
海淀
程序员
私信 提问
从零开始学 Web 之 CSS3(一)CSS3概述,选择器

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
2018/07/30
0
0
-webkit-line-clamp实现多行文字溢出隐藏显示省略号

概述: -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。 限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来...

欢乐小金鱼
2015/03/24
2.6K
1
FW: 认识 Iconfont 以及什么是 .eot、.woff、.ttf、.svg

认识 Iconfont 以及什么是 .eot、.woff、.ttf、.svg 一、Iconfont 1. 概述 在前端作业中,二十年前只有页面中铺满文字就算上线产品,现如今,不加点俏皮的“图标”会让页面显得很 Low 很 Lo...

SamXIAO
09/23
30
0
认识 Iconfont 以及什么是 .eot、.woff、.ttf、.svg

在看别人 github 项目的时候,看到了 iconfont,百度了一下是阿里的图标库,这个很容易理解,但是自己操作一遍之后发现下载下来的目录还包含了 .eot、.woff 等文件,对于这些新东西感到有些陌...

dkvirus
2017/10/22
206
0
-webkit-tap-highlight-color处理元素点击默认高亮

概述: -webkit-tap-highlight-color 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。 当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素...

欢乐小金鱼
2015/03/24
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx学习笔记

中间件位于客户机/ 服务器的操作系统之上,管理计算机资源和网络通讯。 是连接两个独立应用程序或独立系统的软件。 web请求通过中间件可以直接调用操作系统,也可以经过中间件把请求分发到多...

码农实战
今天
5
0
Spring Security 实战干货:玩转自定义登录

1. 前言 前面的关于 Spring Security 相关的文章只是一个预热。为了接下来更好的实战,如果你错过了请从 Spring Security 实战系列 开始。安全访问的第一步就是认证(Authentication),认证...

码农小胖哥
今天
10
0
JAVA 实现雪花算法生成唯一订单号工具类

import lombok.SneakyThrows;import lombok.extern.slf4j.Slf4j;import java.util.Calendar;/** * Default distributed primary key generator. * * <p> * Use snowflake......

huangkejie
昨天
12
0
PhotoShop 色调:RGB/CMYK 颜色模式

一·、 RGB : 三原色:红绿蓝 1.通道:通道中的红绿蓝通道分别对应的是红绿蓝三种原色(RGB)的显示范围 1.差值模式能模拟三种原色叠加之后的效果 2.添加-颜色曲线:调整图像RGB颜色----R色增强...

东方墨天
昨天
11
1
将博客搬至CSDN

将博客搬至CSDN

算法与编程之美
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部