CSS学习笔记

来源：互联网发布：香蕉网络电视香蕉tv 编辑：程序博客网时间：2024/06/01 16:41

CSS（Cascading Style Sheets，层叠样式表）包含一些简单语句，称为规则。每个规则为选择的一些HTML元素提供样式。
使用W3C验证工具验证CSS（http:jigsaw.w3.org/css-validator）。

一、CSS和HTML的结合方式

1、style属性方式

<h2 style="color:red">hello world</h2>

2、style标签方式（内嵌方式）：将CSS规则放置在<style></style>中间。

<html><head>    <style>        选择器 {属性名称: 属性值;}        h2 {color: red;}    </style></head><body>...</body></html>

3、引入方式：在<style>标签内引入外部文件。

<style type="text/css">    @import url("CSS文件的地址");    h2 {color: red;}</style>

4、链接方式：使用<link>元素。<link>元素用于包含一个外部样式表，这就不需要<style>元素。<link>元素放在<head>标签内。

<html><head>    <link type="text/css" rel="stylesheet" href="***.css"></head><body>...</body></html>

二、CSS选择器

指定CSS要作用的标签，那个标签的名称就是选择器。

CSS选择器的类型：

html标签名选择器：使用的就是html的标签名。
class选择器（类选择器）
id选择器

.类选择器名称{    css样式代码;    }#id选择器名称{    css样式代码;    }

类选择器，以“.”开头；id选择器以“#”开头。
多个标签的class属性值可以相同。一个元素只能有一个id，但它可以属于多个类。
id和类名都可以包含字母、数字以及_字符，但不能有空格。类名要以一个字母开头，id名可以以一个数字或字母开头。
通过在class属性中可以放入多个类名，可以指定一个元素属于多个类，类名之间用空格分隔。

三、CSS扩展选择器

关联选择器：标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择器。
组合选择器：对多个不同选择器进行相同样式设置的时候应用此选择器。多个不同选择器要用逗号分隔开。
伪元素选择器：其实就在html中预先定义好的一些选择器。或者说当前元素处于的状态。

四、继承

子元素继承父元素。
其中<img>元素是段落的一个子元素，但它没有任何文本，所以不受影响。

五、优先级

由上到下，由外到内。优先级由低到高。
!important > style属性 > id > class > 标签名

六、字体

1、font-family属性：页面中使用的字体。共有5个字体系列：sansserif、serif、monospace、cursive和fantasy。

2、font-size属性：字体大小。指定字体大小的方式有：像素（px）、百分数、em（指定比例因子）和关键字。举个例子如下：

body{    font-size:14px    font-size:small;}h1{    font-size:150%;}h2{    font-size:1.2em;}

在上面的例子中，body的字体大小是14px，h1的字体大小是body的150%即21px，h2的字体大小是body的1.2倍即17px左右。

3、color属性：文本设置颜色。

4、font-weight属性：字体的粗细。使用bold设置为粗体，使用normal去掉粗体。

5、text-decoration属性：为文本增加风格，包括上划线、下划线（underline）和删除线。

6、font-style属性：为字体增加风格。包含斜体（italic）和倾斜（oblique）。

七、颜色

16种基本颜色和150种扩展颜色。

指定颜色的方法：直接使用颜色名和按红、绿、蓝分量的多少来指定。
下面通过设置背景颜色（background-color）来具体说明。

body{    background-color:颜色名;    background-color:rgb(红的百分比,绿的百分比,蓝的百分比);    background-color:rgb(红的数值,绿的数值,蓝的数值);    background-color:十六进制码;}

【注】
1）颜色名不区分大小写
2）rgb是red，green，blue的缩写
3）红、绿、蓝指定为0到255之间的数值
4）使用十六进制码指定颜色
举个例子：#cc6600
其中，#表示十六进制码；cc表示红分量；66表示绿分量；00表示蓝分量。

八、盒模型

内容区：包含元素的内容，如文本或图像，这个内容放在盒子里，盒子的大小正好包含所有内容，内容与盒子边缘之间没有空间。
内边距（padding）：不一定有，存在于内容区周围，透明的，没有颜色，没有装饰。
边框（border）：元素周围可以有一个可选的边框，包围内边距，是围绕内容的一条线，可以有各种不同的宽度、颜色和样式。
外边距（margin）：可选，包围边框，透明的，没有颜色，没有装饰。

九、`<div>`和`<span>`

<div>元素用于将相关的元素归组在一起，放在逻辑区中。创建逻辑区有助于标识主内容区以及页面的页眉和页脚。
<span>元素用于将相关的内联元素和文本归组在一起。

十、布局属性

1、CSS布局漂浮属性

1）float（漂浮）

none：默认值。对象不飘浮
left：文本流向对象的右边
right：文本流向对象的左边

2）clear（清除）

none：默认值。允许两边都可以有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象
both：不允许有浮动对象

2、CSS布局定位属性position

static：默认属性。静态定位。指定元素按照常规的文档内容流进行定位。静态定位的元素不能使用top、left和其他类似属性定位。
absolute：绝对定位。指定元素是相对于它包含的元素进行定位。相对于其他的元素，绝对定位的元素是独立定位的。
fixed：固定定位。指定元素是相对于浏览器窗口进行定位。不随文档其他部分滚动。
relative：相对定位。元素按照常规的文档流进行布局，它的定位相对于它文档流中的位置进行调整。

【补充】

1、常用的块状元素有：
<div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
2、常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
3、常用的内联块状元素有：
<img>、<input>
4、CSS注释

/*代码注释*/

阅读全文

0 0