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的基础知识详见下 ...
随机推荐
- XML格式化加载的时候提示Content is not allowed in prolog. Nested exception: Content is not allowed in prolog
原因:原本是.xml文件格式的内容,被你用右键,文本编辑,保存,导致格式不认了. 解决方法:下载个notepad+ 工具,用这工具打开,修改,编辑,保存,即可被继续认作xml格式.
- 【SPOJ】QTREE7（Link-Cut Tree）
[SPOJ]QTREE7(Link-Cut Tree) 题面 洛谷 Vjudge 题解 和QTREE6的本质是一样的:维护同色联通块 那么,QTREE6同理,对于两种颜色分别维护一棵\(LCT\) 每 ...
- 使用Hexo搭建GitHub博客（2018年Mac版）
关于本文 本文仅记录自己学习搭建Hexo博客之时,搭建过程中掉坑的历程总结,对零基础起步的观众朋友可能缺乏某些基础技术的指导,请优先食用下述两篇优质教程: [2018更新]小白独立搭建博客-Githu ...
- poj4052 Hrinity
pdf题面:传送门 题目大意:给定一些单词和一个句子,问有多少个单词在句子中出现过,如果一个但单词包含另一个单词,并且两个单词都出现过,那么只算最外层的单词(包含另一个单词的单词). 分析:这道题如果 ...
- 「Django」rest_framework学习系列-用户认证
用户认证:1.项目下utils文件写auth.py文件 from rest_framework import exceptions from api import models from rest_f ...
- 「Linux」centos7安装uWSGI
一定要记得先安装python-devel,再安装uWSGI,否则即使安装成功也是不能使用的,切记切记
- ubuntu系统安装mysql二进制压缩包(tar.gz)以及navicat远程连接服务器（linux系统）
一.ubuntu安装mysql5.6二进制压缩包(tar.gz) 准备 0. 获取 mysql-5.5.15-linux2.6-i686.tar.gz 二进制安装文件 mysql 官网下载页面选择 L ...
- eclipse插件大全(官方)
eclipse插件大全:http://marketplace.eclipse.org/metrics/successful_installs 各个版本插件: http://download.eclip ...
- Asp.net mvc 大文件上传 断点续传 进度条
概述 项目中需要一个上传200M-500M的文件大小的功能,需要断点续传.上传性能稳定.突破asp.net上传限制.一开始看到51CTO上的这篇文章,此方法确实很不错,能够稳定的上传大文件,http: ...
- java请求url返回json
package cn.it.test; import java.io.BufferedReader; import java.io.IOException; import java.io.InputS ...