CSS初步了解
CSS 概述
个人理解为对html的扩展，对html关键字进行功能添加。
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
4）css样式
加载css样式有以下四种
外部样式
内部样式
行内样式
导入样式
<link href="layout.css" rel="stylesheet" type="text/css" />
这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。
<style>
h2 { color:#f00;}
</style>
这种形式是内部样式表，它是以<style>和</style>结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。
<p style="font-size:18px;">内部样式</p>
这种在标签内以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>
<style type="text/css">
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
</style>
</head>
<body>
<p class="spread">This is some text. This is some text.</p>
显示效果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 属性:
<p class="key" id="principal">
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的基础知识详见下 ...
随机推荐
- redis的Pub/Sub功能
Pub/Sub功能(即Publish,Subscribe)意思是发布及订阅功能.简单的理解就像我们订阅blog一样,不同的是,这里的客户端与server端采用长连接建立推送机制,一个客户端发布消息,可 ...
- 图像处理之中值滤波介绍及C实现
1 中值滤波概述 中值滤波是基于排序统计理论的一种能有效抑制噪声的非线性信号平滑处理技术,它将每一像素点的灰度值设置为该点某邻域窗口内的所有像素点灰度值的中值. 中值滤波的基本原理是把数字图像或数字序 ...
- 我学习的第一个uiautomator从创建到运行结束
一.新建自动化脚本 1.新建java工程包 [file]----[new]----[Java Project] 新建工程 [右 ...
- 跟我一起写Makefile(四)
书写命令———— 每条规则中的命令和操作系统Shell的命令行是一致的.make会一按顺序一条一条的执行命令,每条命令的开头必须以[Tab]键开头,除非,命令是紧跟在依赖规则后面的分号后的.在命令行之 ...
- [USACO07MAR]黄金阵容均衡Gold Balanced L…
https://www.luogu.org/problem/show?pid=1360 题目描述 Farmer John's N cows (1 ≤ N ≤ 100,000) share many s ...
- 很好的脑洞题：dfs+暴力 Gym - 101128A Promotions
http://codeforces.com/gym/101128 题目大意:给你一个a,b,e,p.有e个点,p条有向边,每条边为(x,y),表示x->y,每次我们都取出一个入度为0的,并且一次 ...
- JAVA多线程提高七:Callable与Future的应用
Callable与Runnable 先说一下java.lang.Runnable吧,它是一个接口,在它里面只声明了一个run()方法: public interface Runnable { publ ...
- protoc
平台安装: 在window 平台使用的工具protoc.zip linux平台的安装方式. 执行在windos平台上执行生成java代码命令: protoc --java_out=./ Keyword ...
- IO流-读取写入缓冲区
例如FileReader和FileWriter在读取的时候是读一次或者写一次就请求磁盘,这样使用的时间非常的长,效率比较低,因此引入BufferedReader和BufferedWriter作为读取和 ...
- 在mac上安装ruby
1.先装RVM,一个多版本ruby环境的管理和切换工具 curl -sSL https://get.rvm.io | bash -s stable 会自动装上最新版.更新RVM版本:$ rvm get ...