CSS初步了解

CSS 概述

个人理解为对html的扩展，对html关键字进行功能添加。

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一

4）css样式

加载css样式有以下四种

外部样式

内部样式

行内样式

导入样式

这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。

<style>

h2 { color:#f00;}

</style>

这种形式是内部样式表，它是以<style>和</style>结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。

这种在标签内以style标记的为行内样式，行内样式只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。

@import url("/css/global.css");

链接样式是以@import url标记所链接的外部样式表，它一般常用在另一个样式表内部。如layout.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个global.css的文件中，然后在layout.css中以@import url("/css/global.css")的形式链接全局样式，这样就使代码达到很好的重用性。

5）css优先级

id优先级高于class

后面的样式覆盖前面的

指定的高于继承

行内样式高于内部或外部样式

总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的

6）css盒模型组成

css盒模型是本节教程的重点。前面几个知识点，如果您会用表格布局的话，就非常好理解和掌握了。这里的盒模型是和table布局的一个不同点。学习web标准，首先要弄懂的就是这个盒模型，这就是DIV排版的核心所在。传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。这种排版方式的网页代码简洁，表现和内容相分离，维护方便，能兼容更多的浏览器，比如PDA设备也能正常浏览。

那么它为什么叫盒子呢？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。是不是这样就很容易理解盒模型了。

所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width所定义的宽度仅仅是内容部分的宽度，这是许多朋友容易搞混的地方

这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁。

如果现在您对CSS盒模型理解还不够透彻，继续往下看，后来的章节会都会应用到盒模型实例

8 前一节我们回顾了xhtml基础和css基础部分，今天我们正式开始使用网页制作软件——adobe公司出品的dreamweaver来开始网页设计之旅。

CSS 基础语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

h1 {color:red; font-size:14px;}

CSS 属性选择器

对带有指定属性的 HTML 元素设置样式。

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

下面的例子为 title="W3School" 的所有元素设置样式：

[title=W3School]

{

border:5px solid blue;

}

在凡是出现title=W3School的语句都应用篮框5px。

CSS 选择器参考手册

选择器描述

[attribute] 用于选取带有指定属性的元素。

[attribute=value] 用于选取带有指定属性和值的元素。

[attribute~=value] 用于选取属性值中包含指定词汇的元素。

[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

[attribute^=value] 匹配属性值以指定值开头的每个元素。

[attribute$=value] 匹配属性值以指定值结尾的每个元素。

[attribute*=value] 匹配属性值中包含指定值的每个元素。

CSS 背景

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。

可以对背景延伸，定位。

CSS 文本属性可定义文本的外观。

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

text-indent 属性，该属性可以方便地实现文本缩进。

word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

<html>

<head>

p.spread {word-spacing: 30px;}

p.tight {word-spacing: -0.5em;}

</style>

</head>

<body>

显示效果This is some text. This is some text.

简单的例子：

stylesheet -- 定义一个外部加载的样式表

在与前面相同的目录中，新建另一个文本文件。该文件将成为您的样式表。请将它命名为：style1.css
在您的CSS文件中，复制、粘贴下面的行，并保存该文件:

strong {color: red;}

连接您的文档和样式表

为将您的文档和样式表相连，请编辑您的HTML文件。并添加下面高亮的行：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>

</html>

保存该文件并刷新您的浏览器。该样式表将首字母显示为红色，如下所示：

Cascading Style Sheets

类选择器（Class selectors）

通过设置元素的 class 属性，可以为元素指定类名。类名由开发者自己指定。文档中的多个元素可以拥有同一个类名。

在写样式表时，类选择器是以英文句号（.）开头的。

ID选择器（ID selectors）

通过设置元素的 id 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。

在写样式表时，ID选择器是以#开头的。

例：

下面的p标签同时具有 class 属性和id 属性:

id 属性值 principal必须在文档中是唯一的；但文档中的其他标签可以有和p相同的 class 属性值 key.

在一个CSS样式表中, 下面的规则将使所有class属性等于key的元素文字颜色呈现绿色。（这些元素不一定都是 <p> 元素。）

.key {

color: green;

}

下面的规则将使 id 等于 principal 的那个元素的文字变为粗体:

#principal {

font-weight: bolder;

}

如果多余一个规则指定了相同的属性值都应用到一个元素上，CSS规定拥有更高确定度的选择器优先级更高。ID选择器比类选择器更具确定度, 而类选择器比标签选择器（tag selector）更具确定度。

文本内容

CSS可以在元素的前后插入文本：在选择器的后面加上:before 或者 :after 。在声明中，指定 content 属性，并设置文本内容。

例

下面这条规则在所有类名包含 ref的元素前面加上 Reference:

.ref:before {

font-weight: bold;

color: navy;

content: "Reference: ";

}

CSS初步了解的更多相关文章

HTML/CSS初步了解
一.CSS是什么? 它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示 ...
Html/CSS 初步介绍html和css部分重要标签
&初步介绍html和css部分重要标签& 注:开头书写:<!DOCTYPE html>表明对应标准html代码先行总结重点下方给出具体 CSS: 1. position ...
2016 - 1 - 25 CSS初步 (二)
1.The customising link We can change the link's style when we move our pointer on the link like that ...
关于CSS初步入门简述1
关于CSS的简介可以自行百度,本篇只考虑内容首先关于CSS会由浅入深,写在前面的有很多不严谨,只是为了引出后文所写.不过如果谬误较大,敬请指正! 1.大部分的代码要写在之中简单的例子: <b ...
2016 - 1 - 24 CSS初步
1.The difference between CSS and HTML HTML document is that it specities the content of the page. An ...
CSS初步学习
1.选择器: 如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. id 选择器 id 选择器可以为标有特定 id 的 ...
Html/Css 初步认识笔记
1.什么是 HTML ? HTML(HyperText Markup Language) 的学名是超文本标记语言. 标记用来表示网页内容要如何显示,自身不显示 .<我就是标记> 标记成对出 ...
Css初步认识
css 美化页面 cascading style sheet 层叠样式表 css语法: 选择器{ css属性名:属性值;css属性名:属性值;} css引入方式: 方式一:内联样式表通过标签 ...
CSS初步理解
近期在学习牛腩的时候遇到了网页的制作.挺新奇的.其中涉及到了有关CSS的知识,于是乎自己也就花费两个小时的时间.找了本浅显易懂的书来看了一遍,从宏观上来了解CSS的相关内容.有关CSS的基础知识详见下 ...

随机推荐

转：SVM与SVR支持向量机原理学习与思考（一）
SVM与SVR支持向量机原理学习与思考(一) 转:http://tonysh-thu.blogspot.com/2009/07/svmsvr.html 弱弱的看了看老掉牙的支持向量机(Support ...
hive 分区表和分桶表
1.创建分区表 hive> create table weather_list(year int,data int) partitioned by (createtime string,area ...
Splay 的区间操作
学完Splay的查找作用,发现和普通的二叉查找树没什么区别,只是用了splay操作节省了时间开支. 而Splay序列之王的称号可不是白给的. Splay真正强大的地方是他的区间操作. 怎么实现呢? 我 ...
python基础（3）
使用list和tuple list Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 比如,列出班里所有同学的名字,就可以用一个list表示: ...
【learning】中国剩余定理
问题描述 "今有物不知其数,三三数之余二,五五数之余三,七七数之余二.问物几何?" emmm这是..最开始这个问题被提出来的描述其实说白了就是求解一次同余式组然后还可以..解决 ...
Linux常用网络工具：批量主机服务扫描之netcat
netcat又叫做瑞士军刀,是黑客和系统管理员常用的网络工具,最初开发的目的是文件传输,后来发展出很多强大的功能,比如也可以完成批量主机服务扫描. 之前介绍了另一个更常用的批量主机服务扫描工具:nma ...
Jenkins使用教程之用户权限管理（包含插件的安装）
在工作的过程中由于分工合作的关系,我们因为工作内容的不同可能分为不同的组织里,但是jenkins默认的权限管理并没有用户组的概念,所以我们需要第三方插件的支持来解决问题.插件:Role-based A ...
关闭eclipse自动弹出console功能
使用eclipse时经常会用到最大化窗口,而如果此时是开着tomcat等服务的话,一段后台有打印什么东西出来都会自己弹出 console挺烦人的.可以使用以下操作关闭这个功能. Preferences ...
「LibreOJ β Round #4」求和
https://loj.ac/problem/528 1 , d =1 μ(d)= (-1)^k , d=p1*p2*p3*^pk pi为素数 0 ...
HDU6127 简单几何暴力二分
LINK 题意:给出n个点,每个点有个权值,可以和任意另外一点构成线段,值为权值积.现问过原点的直线中交所有线段的权值和的最大值,注意直线必不经过点. 思路:直线可以将点集分为两侧,此时的权值为两侧点 ...

CSS初步了解

CSS初步了解的更多相关文章

随机推荐

热门专题