search

zilongxuan001 / LearnFreecode

0 stars 0 forks source link

chapter7: CSS入门 #337

Closed zilongxuan001 closed 6 years ago

zilongxuan001 commented 6 years ago

HTML知识清单

前期都学了什么东西?

HTML元素

HTML结构

HTML语法

嵌套

HTML标准

来源：《Head First HTML 与 CSS》(中文第二版)P256

zilongxuan001 commented 6 years ago

CSS语句

CSS就是用来展现HTML的样式的。如果说HTML是个毛坯房，CSS就是给房子刷墙调色，js就是给房子安灯，排水走电，安空调。

CSS包括选择器，属性和值。 选择器可以是元素、类（class）和id。 属性和值放在括号里，属性后面加冒号，值后面加分号。

CSS语句形式

选择器 { 
              属性: 样式；
}

CSS语句的位置

放在HTML页面中。在HTML页面<head></head>下的<style></style>中；

另建文件，在HTML插入链接。建立一个.css文件，将语句直接放在文件中，再在HTML页面的<head></head>里加上一个<link>元素。

来源：《Head First HTML 与 CSS》(中文第二版)P258，P259, P261, P264

CSS样式参考书《CSS Pocket Reference》(O' Relly)

zilongxuan001 commented 6 years ago

CSS样式

两个元素的规则一样，则可以在选择器之间加逗号，如

选择器1, 选择器2 {
             属性: 值;
}

多个元素的规则一样的部分，放在一起，按照上面形式写；规则不一样的部分，每个元素单独写自己的。

<p>和<h>的样式，有字体（font-family），颜色（color），字体装饰(text-decoration)。字体装饰有上划线，下划线和删除线等。

在标题下加一条线，可以是使用border-bottom: 1px solid blackk;。

使用下边框加下划线，线条是横向延伸到浏览器边上的，使用underline（下划线）加下划线，线条截止到文字末尾。

来源：《Head First HTML 与 CSS》(中文第二版)P264，P262-265

zilongxuan001 commented 6 years ago

批量使用样式

批量使用样式的步骤：

  1. 建立.css文件，编写css语句。注意不要写<style></style>。 2.插入链接。在各HTML页面中插入链接。注意不同的HTML语句在不同的文件夹。 3.测试。运行HTML文档，查看效果。

CSS文件又称样式表，英文stylesheets。

添加样式链接，使用<link>元素，放在<head></head>里。格式如下

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

type属性说明信息的类型是text/css，H5不要求有此属性。

rel 属性指定了HTML文件与所连接文件的关系。这里链接到一个样式表。

herf属性是放css的链接，可以是相对链接或URL。

来源：《Head First HTML 与 CSS》(中文第二版)P273， P274， P275

zilongxuan001 commented 6 years ago

继承

继承

就是子元素继承父元素及之上元素的属性。元素之间有嵌套，被嵌套的元素会继承嵌套元素的属性。比如

<div>
     <h2></h2>
     <p></p>
</div>

<h2>和<p>都会继承<div>元素的属性。

覆盖继承

如果子元素的属性和父元素及之上元素的属性冲突，则优先使用子元素的属性，这样相当于子元素的属性覆盖了父元素及之上元素的属性。

能继承和不能继承

像字体、字号、颜色、背景色、文本装饰等属性，子元素都能继承。

像边框等属性，子元素不能继承。

O'Relly出版的《CSS Pocket Reference》有详细记录。 一般，影响文本外观的样式都能继承，如字体颜色（color属性）、font-family（字体系列）、与字体相关的属性，如font-size（字体大小）、font-weight(字体粗细)和font-style（是否斜体）. 其他属性如边框，是不能继承的

添加注释

使用

/*

       */

可以放单行注释，也可以放多行注释

来源：《Head First HTML 与 CSS》(中文第二版)P281, P284，P285

zilongxuan001 commented 6 years ago

类(class)

类的定义

类，即class，就像元素的俱乐部，只要加入该俱乐部，元素就有该俱乐部的属性和值。

创建class属性步骤

  1. 在HTML页面的元素中插入类和类名，比如<p class="green"></p>。
  2. 在HTML的<style></style>中，或者CSS文件中，编写类名、属性和值。比如p.green { color: green; }
  3. 测试。运行页面，检查效果。

元素的类选择器样式

一种元素的类选择器样式

元素名称.类名称{
         属性: 值;
}

多种元素的类选择器样式

元素名称1.类名称, 元素名称2.类名称 {
           属性: 值;
}

所有元素都使用该类

  .类名称{
      属性: 值；
}

一个元素多个类

一个元素可以有多个类，就像一个人可以加入多个俱乐部一样，元素引用类的格式如下

<开始标签  class="类1 类2 类3 ...">

来源：《Head First HTML 与 CSS》(中文第二版)P286-291

zilongxuan001 commented 6 years ago

CSS应用指南

CSS应用指南的规则都有哪些？

来源：《Head First HTML 与 CSS》(中文第二版)P292

zilongxuan001 commented 6 years ago

CSS验证工具

如何使用CSS验证工具？

CSS验证工具，就是验证CSS语句是否符合W3C规范。

CSS验证方法和HTML验证方法一样，都可以通过粘贴URL，上传.css文件和复制粘贴内容，三种方法验证CSS。

http://jigsaw.w3.org/css-validator/

来源：《Head First HTML 与 CSS》(中文第二版)P298

zilongxuan001 commented 6 years ago

CSS属性

CSS都有哪些属性？

 `color`  设置文本元素的字体颜色
 `font-weight` 控制文本的粗细，可设置粗体
 `font-size`  让文本更大或更小
 `font-style`  设置斜体文本


 `background-image`   在元素背后放一个图像，背景图
 `background-color` 控制元素的背景颜色
 `left`  指定一个元素左边所在位置
 `line-weight`  设置文本元素中的行间距
 `letter-spacing`  在字母之间设置间距
 `padding`  内边距，设置元素边缘和内容之间的空间大小
 `margin`    外边距，设置元素边缘和浏览器的相对大小
 `border`  在元素周围加边框，可以是实线边框、凸起边框、虚线边框
 `list-style`  改变列表中列表项的外观

来源：《Head First HTML 与 CSS》(中文第二版)P300