Head First HTML与CSS 笔记part7

最新推荐文章于 2024-02-28 10:28:58 发布

hliu1307

最新推荐文章于 2024-02-28 10:28:58 发布

阅读量148

点赞数

分类专栏： html+css

html+css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS入门

CSS书写规则

典型的规则包括一个选择器，以及一个或者多个属性和值，选择器指定规则将应用到哪些元素，每个属性声明以一个分号结束，规则中的所有属性和值都放在{ }大括号之间，可以使用元素名作为选择器，来选择任意元素
选择需要增加样式的元素，在其中指定你想要设置样式的属性

p{
		background-color:red;
		border: 1px solid gray;
	}

上面的例子中，是为< p >元素增加样式，注意在CSS中名字两边不用加< >。
如果一些元素的想增加的CSS样式一致，可写在一块,不一致的可以单独写出来

h1,h2{
		background-color:red;
		border: 1px solid gray;
		}
h1{
		color:maroon;
		}

把CSS放入HTML中

要为HTML中添加CSS样式，需要在< head >元素中增加开始和结束style标记，将CSS规则放入style中

采用CSS文件为页面增加样式

将CSS规则写到CSS文件中，不需要写style元素，直接写CSS规则，如前面的示例一样
从需要更改页面样式的html页面创建一个链接到这个html文件的外部链接

<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
<link type="text/css" rel="stylesheet" href="lounge.css">
</head>

link:链入外部信息,link是一个void元素，它没有结束标记
type=“text/css”：说明这是一个CSS样式表，在较老的版本中可以看见，在HTML5中，不再需要这个属性（这是可选的）
rel属性指定HTML文件和所链接的文件间的关系，这里需要链接到一个样式表所以需要用stylesheet

继承样式

继承：当一个元素有某个样式后，其内部的其他元素同样会继承这个样式（也可以看成作用域大小的问题，类似编程中的变量）（当然大部分样式能继承，有些却也不能继承，不如加边框）
覆盖继承：当处于元素内部的另一个元素想使用不一样的样式，可以再对这个内部元素写CSS规则（类似一个作用域中包含一个更小的作用域，在小作用域中再对变量赋值）

类

有时我们需要给不同段落设置不同的样式，这时我们引入类（class),可以对这个类中所有元素施加统一的样式
创建class的步骤

为html中的元素增加class属性

<p class="greentea">
...
</p>

在css中选择这个类,编写一个类选择器

p.greentea{
		color:green;
		}

先选择这个类中的元素，在这里就是元素p
再用一个 . 指定一个类
greentea是一个类名
选择器p.greentea会选择greentea中的所有段落将其文本设置为绿色

.greentea{
		color:green;
		}

省略所有元素名，只留一个点，后面是类名，那么这个规则会这个类的所有成员

一个元素可以加入多个类中，只需把各个类名放在class属性中，各个类名之间用空格隔开，类名的顺序并不重要

<p class="greentea raspberry blueberry">

CSS规则的特定程度

当要对某个样式进行修改时，比如都要修改文本颜色，特定程度高的规则会被施行
以上面的p元素为例
p{…}低于.greentea{…}低于p.greentea{…}等于p.raspberry{…}等于p.blueberry{…}
对于特定程度一样的情况，会使用最后出现的

验证CSS

登录http://jigsaw.w3.org/css-validator/网站进行验证

一些元素

color：使用color元素来设置文本颜色
font-weight:控制文本的粗细，使用它设置为粗体
left:利用这个属性指定一个元素的左边所在位置
line-height:设置一个文本元素中的行间距
top：控制元素顶部位置
background-color:控制元素的背景颜色
border:在一个元素周围加边框，可以有一个实线边框，突起边框，虚线边框
padding：如果在一个元素边缘和它的内容之间需要有空间，可以使用padding(内边距）
font-size:让文本变大或变小
text-align:使用这个属性将文本左对齐，居中或者右对齐
letter-spacing:这个属性能够在字母之间设置间距
font-style:使用这个属性来设置斜体文本
list-style:这个属性允许你改变列表中列表项的外观
background-image:这个属性在元素后面放置一个图像