CSS入门

最新推荐文章于 2024-09-17 10:24:19 发布

啥、

最新推荐文章于 2024-09-17 10:24:19 发布

阅读量703

点赞数

分类专栏： # 学习笔记文章标签： css css3 html

本文链接：https://blog.csdn.net/a_007510/article/details/122644225

版权

学习同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

笔记

2 篇文章 0 订阅

订阅专栏

一、CSS简介

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

语法规则：
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

二、 CSS选择器

id 和 class 选择器
如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。

2.1 id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

2.2 class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

三、CSS创建

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。
插入样式表的方法有三种:

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

3.1 外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用 link 标签链接到样式表。 link 标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

3.2 内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用 style 标签在文档头部定义内部样式表:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

3.3 内联样式

当样式仅需要在一个元素上应用一次时，可使用内联样式，因为要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。

使用内联样式，需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。

3.4 多重样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下，优先级如下：

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

四、CSS背景

CSS 背景属性用于定义HTML元素的背景。

CSS 属性定义背景效果:

background-color 设置元素的背景颜色
background-image 把图像设置为背景。
background-repeat 设置背景图像是否及如何重复。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-position 设置背景图像的起始位置。

五、CSS文本格式

5.1 文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
一个网页的背景颜色是指在主体内的选择：

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

5.2 文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。如下：

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

5.3 文本修饰

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线，也可装饰文字：

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

5.4 文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

5.5 文本缩进

文本缩进属性是用来指定文本的第一行的缩进。

p {text-indent:50px;}

六、CSS字体

CSS字体属性定义字体，加粗，大小，文字样式。

6.1 字体样式

主要是用于指定斜体文字的字体样式属性。

这个属性有三个值：

正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜（和斜体非常类似）

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

6.2 字体属性

Property	说明
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

七、CSS链接

不同的链接可以有不同的样式。

链接样式
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
这四个链接状态是：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */