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的基础知识详见下 ...
随机推荐
- Spring Boot系列教程五：使用properties配置文件实现多环境配置
一.前言 实际项目开发过程中会用到多个环境,比如dev,test,product环境,不同的环境可能使用不同参数,为便于部署提高效率,本篇主要通过properties配置文件来实现多环境的配置. 二. ...
- 51nod1967 路径定向（欧拉回路+结论题）
看到入度等于出度想到欧拉回路. 我们把边都变成无向边,有一个结论是偶数度的点都可以变成出入度相等的点,而奇数点的不行,感性理解分类讨论一下就知道是对的. 还有一个更好理解的结论是变成无向边后奇数点的个 ...
- ajax方式提交文件到后台同时加其他参数
struts2后台Action方法,直接用参数成员变量对象的属性接收即可
- 小程序navigatorTo缺点和修正方法
1.不好带参数跳转到tabbar,即下部的导航栏目. reLauntch方法可以传递参数到导航栏目: go_to_prolist: function (e) { var datatype = e.cu ...
- 前端PHP入门-014-参数的引用
我们学习了变量的引用,我们来回顾一下知识: <?php $a = 10; $b = &$a; $a = 100; echo $a.'---------'.$b; ?> 而函数的参数 ...
- mysql \G
mysql 命令区分大小写.ego (\G) Send command to mysql server, display result vertically. go (\g) ...
- jdbc:oracle:thin:@localhost:1521:orcl和jdbc:oracle:thin:@localhost:1521/orcl的区别
Oracle Thin JDBC Driver 驱动程序包名:ojdbc14.jar.ojdbc6.jar 驱动程序类名: oracle.jdbc.driver.OracleDriver JDBC ...
- 「LibreOJ β Round #4」多项式 （广义欧拉数论定理）
https://loj.ac/problem/525 题目描述 给定一个正整数 kkk,你需要寻找一个系数均为 0 到 k−1之间的非零多项式 f(x),满足对于任意整数 x 均有 f(x)modk= ...
- 51nod 1548 欧姆诺姆和糖果 （制约关系优化枚举）
1548 欧姆诺姆和糖果 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题 收藏 关注 一天,欧姆诺诺姆来到了朋友家里,他发现了 ...
- UVA 12063 Zeros and Ones
https://vjudge.net/problem/UVA-12063 题意: 统计n为二进制数中,0和1相等且值为m的倍数的数有多少个 dp[i][j][k] 前i位二进制 有j个1 值模m等于k ...