CSS基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/u013890437/article/details/39078461

笔记比较乱，只是学习中记下的！

一、CSS语法基础

css规则由二个主要部分：选择器、一条或多条属性声明

例：h1{color:red;} h1为选择器，color：条件属性

a)、选择器的分组：

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

b)、继承及其问题：

body {
     font-family: Verdana, sans-serif;
     }

当给BODY设置样式后，BODY下所有HTML标签都有这个样式，但是有些游览器不支持继承，可以用选择器分组来实现。

c)、派生选择器：

li strong {
    font-style: italic;
    font-weight: normal;
  }

通过依据元素在其位置上的上下文关系来定义样式，可以使标记更加简介。

根据<li>标签下为<strong>标签定义样式。

d)、id选择器

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

id选择器以#来定义。

#red {color:red;}
#green {color:green;}

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

id选择器在每个HTML中只能出现一次。

e)、id选择器建立派生选择器

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

意思：此ID下的HTML 标签拥有的样式

f)、类选择器

类选择器以一个点号显示。

.center {text-align: center}
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

用class引用，注意：类选择器第一个字符不可谓数字

g)、类选择器也可以用在派生选择器

h)、属性选择器

对带有指定的HTML元素设置样式

I)、创建CSS

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

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

2、<head>

..........

</style>

</head>

3、<p style="color: read">abcdefg</p>

注：当一个标签即拥有外部样式表、内部样式表，以内部为准，外部为辅。

二、CSS样式

（1）：背景

1、背景色

background-color:背景色

p {background-color: gray;}
p {background-color: gray; padding: 20px;}

padding:向外延伸，增加一些内边距。

注：不能继承，如果一个元素没有指定背景色，他就是透明的。

2、背景图片

background-image:url图片路径

p.flower {background-image: url(/i/eg_bg_03.gif);}

3、背景重复

background-repeat

repeat-x:水平方向重复

repeat-y:垂直方向重复

no-repeat:不允许图像在任何方向平铺

属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样

4、背景定位

background-position 改变图像在北京中的位置

center

top

botton

right

left

5、百分数值

background-position:50% 50%;

6、长度值

background-position:500px 200px;

7、背景关联

background-attachment:防止当文档向下滚动，图像也向下滚动，通过这个属性可以声明图像相对于可视区是固定的。
background-positionbackground-positionbackground-positionbackground-position:50% 50%;background-position:50% 50%; fixed:固定的

scroll：滚动的

（2）文本

1、缩进文本

这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em：

p {text-indent: 5em;}

2、水平对其

text-align:值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。

justify:在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。您也许已经注意到了，两端对齐文本在打印领域很常见。

3、字隔符

word-spacing：改变字之间的标准间隔，默认值normal与设置为0一样。

正长度，字之间间隔增加，负长度，字之间间隔缩小。

4、字符转换

text-transform 处理文本的大小写

属性：默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。

5、文本装饰

text-decoration:

属性：underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。

none 值会关闭原本应用到一个元素上的所有装饰。

5、处理空白符

white-space：影响到用户代理对源文档中的空格、换行和 tab 字符的处理。

它会把所有空白符合并为一个空格，同时忽略元素中的换行。

值 pre：浏览器将会注意额外的空格，甚至回车。

6、文本方向

direction：影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。

属性：默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl。

（3）字体

1、指定字体系列

如果你希望文档使用一种 sans-serif 字体，但是你并不关心是哪一种字体，以下就是一个合适的声明：

body {font-family: sans-serif;}

这样用户代理就会从 sans-serif 字体系列中选择一个字体（如 Helvetica）

2、指定字体系列

下面的例子为所有 h1 元素设置了 Georgia 字体

h1 {font-family: Georgia;}

3、字体风格

normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示

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

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

4、字体变形

font-variant：设定小型大写字母。

小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。

5、字体加粗

font-weight:bold

6、字体大小

font-size:60px

font-size:3.75em：相对于浏览器的默认字体大小设定相对倍数的字体

CSS 学习笔记