CSS 初探
Css: 指层叠样式表 (Cascading Style Sheets),它是用来进行网页风格设计的。通俗的说就是进行网页美化的,没有html依然存在,多了css 它会更好。但是没有html,css就没用多大用处了。
一、定义:
1、样式定义如何显示 HTML 元素
2、是为了解决内容与表现分离的问题
3、多个样式定义可层叠为一
4、外部样式表可以极大提高工作效率(外部样式表通常存储在 CSS 文件中)
二、分类:
1、外部样式表(写在css文件中)
使用情况:当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
在页面中引用如下:
<head>
<link rel="stylesheet"type="text/css" href="mystyle.css">
</head>
mystle是定义样式表文件的名称。
2、内部样式表(在head头部)
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过<style> 标签定义内部样式表。
<head>
<style type="text/css">
body{background-color: red}
p{margin-left: 20px}
</style>
</head>
3、内联样式(在html中)
当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<pstyle="color: red; margin-left: 20px">
Thisis a paragraph
</p>
三、语法:
两个主要部分构成:选择器,以及一条或多条声明。
selector{declaration1; declaration2; ... declarationN }
selector:选择器通常是您需要改变样式的 HTML 元素。
Declarationx:每条声明由一个属性和一个值组成。
1、选择器
Html标签选择器
没有标识,直接引用。
ID 选择器
以“#”标识引用
类选择器
以“.”标识引用
2、三个选择器的异同:
同:都可以通过各自的选择器,来为html内容制定样式。
异:
html 标签选择器比较“整块化”:大家都知道html标签是用来调整html 页面布局的,所以,这个分块比较整齐,是页面的框架,不会总是具体到某个控件或者某个文本。而ID 标签和class标签是个人设定的,我们可以在我们操作的任何地方定义,id 或者class ,或者两者。这样可以把页面样式细化。
重复定义:ID 选择器不可以重复定义,一个页面中,ID 号是唯一的,一定有地方占用,其他地方就不可以占用。class选择器则不同,我们可以把多个地方定义成同一个类,这样方便在样式表统一定义格式,而不用同一个样式多出定义。
注意:html 标签也是有ID 和class属性的。也就是说,如果您给html标签定义了ID ,class 属性,在css 中也可以通过使用ID选择器或者class 选择器来达到目的。一般我们直接使用html 标签,不使用ID,CLASS ,不是那个更好,只是给html 标签定义样式,有现成的html 标签,就没有必要在定义id 或者class.反之,不是html标签的,只能根据需要定义ID ,class 来定义样式了。
也就是:html ,ID ,class 是灵活使用的。
3、书写规则:
大小写:
选择器是对标签的大小写敏感的。
冒号::属性和值之间
属性(property)是您希望设置的样式属性(style attribute)。
每个属性有一个值。属性和值被冒号分开。
selector{property: value}
引号:“”。属性值为若干个单词。
p{font-family: "sans serif";}
分号:;多个属性之间。
p{text-align:center; color:red;}
CSS 初探的更多相关文章
- javafx之CSS初探
文档:http://www.haogongju.net/art/1807238 javafx中的css元素必须有-fx-前缀. 一.介绍 java8中新增了javafx.css开放了css相关api. ...
- css初探
CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector { property: value; ...
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 精通CSS+DIV网页样式与布局--初探CSS
CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...
- CSS Spritec下载,精灵图,雪碧图,初探之原理、使用
CSS Spritec下载,精灵图,雪碧图,初探之原理.使用 关于CSS Sprite CSSSprites在国内很多人叫css精灵雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零 ...
- CSS 预处理器(框架)初探:Sass、LESS 和 Stylus
现在最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 拿less来说,可以在页面上直接使用less文件,但要引用less.js进行解析:同时也可以直接将less ...
- CSS居中初探
刚刚度过了实习期,进入了试用期.试用期依然会安排学习的任务.在学习中发现css的居中十分常用,做一个小小的探索. 一.水平居中 1.行内元素 可以直接使用text-align:center来解决.例如 ...
- 初探CSS
css基本框架 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- 又一次认识HTML,CSS,Javascript 之node-webkit 初探
今天我们来系统的.全面的 了解一下前端的一些技术,将有助于我们写出 更优秀的 产品 出来. 什么是HTML? HTML 是用来描写叙述网页的一种语言. HTML 包括一些根节点.子节点,文本节点.属性 ...
随机推荐
- BZOJ 2096([Poi2010]Pilots-单调队列-差值)
2096: [Poi2010]Pilots Time Limit: 30 Sec Memory Limit: 162 MB Submit: 190 Solved: 97 [ Submit][ ...
- ThinkPhp学习02
原文:ThinkPhp学习02 一.什么是MVC M -Model 编写model类 对数据进行操作 V -View 编写html文件,页面呈现 C -Controll ...
- Android Studio中如何打JAR包
Android Studio中对于library类型的Moudle,默认打出来的是AAR包, 但有时候我们的SDK还需要共享给一些其他eclipse的项目使用,这样我们就需要输出JAR包, 可以通过在 ...
- TComponent明明实现了IDispatch接口,但是却不加上声明,难道是因为FVCLComObject实体对象不存在?
TComponent明明实现了IDispatch接口,可是它的声明却是: TComponent = class(TPersistent, IInterface, IInterfaceComponent ...
- java学习笔记01--数据类型
java学习笔记01--数据类型 java数据类型划分 分为两大类型: 1)基本数据类型:类似于普通的值. 2)引用数据类型:传递的是内存的地址. 浮点类型实际上就是表示小数. java基本数据类型 ...
- java--ThreadPool线程池简单用法
package com.threadPool; import java.util.concurrent.ArrayBlockingQueue; import java.util.concurrent. ...
- sqlplus登录、连接命令
经常使用: sqlplus username/password 如:普通用户登录 sqlplus scott/tiger sqlplus username/password@net_service ...
- ORACLE—005:创建JOB(二)
假设须要创建带參数的job,怎样创建呢. 我们直接将參数声明.并赋值.然后传给job调用的存储过程就可以. 比如.存储过程名为Pro_Test_JOB,參数共同拥有一个.是VARCHAR2类型. 创建 ...
- swift 笔记2
swift交流群:342581988,欢迎增加. 今天真郁闷啊,把mac升级到10.10了.如今好了,曾经的程序都跑不了了.哎,不说了,让我郁闷会再. 说说条件推断吧,事实上这些基本的语法大家都知道肯 ...
- VS快捷键教程
删除或剪切一行(Ctrl + X) 不须要选择不论什么文本, 用来剪切一行, 最经常使用来删除一行. 删除一行也能用 Shift+Delete 格式化整个文档(Ctrl + K, Ctrl + D) ...