Html和Css学习笔记-css基础知识

此篇博客是我的复习笔记，html和css学的时间太久了，忘得差不多了，最近要使用一下，所以重新打开html的书略读，后记录了标签，元素，属性的具体意义。

这里所介绍的html和css的版本为html5与css3

Html是超文本标记语言（英语全称：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言

Css是层叠样式表(英文全称：Cascading Style Sheets)是一种用来html和xml等文件样式的计算机语言，CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

Html与css文件验证工具的地址：http://validator.w3.org/

一.在html页面中使用css定义样式

方法1，在页面中写入css样式信息

style元素规定在浏览器中如何呈现HTML文档。

type属性是必需的，定义 style 元素的内容为 "text/css"。

在<style>元素中加入body{xxxxxx}，用于规定括号内的所有css样式要应用于html<body>元素中的内容，xxxx的内容使用css定义页面的大小，边距，字体，颜色等

例如：

<html>

    <head>

        <title>xxxxxxxx</title>

        <style type="text/css">

        body{

                    background-color: #d2b48c:

                    margin-left: %20;

                    margin-right: %20;

                    border: 2px dotted black;

                    padding: 10px 10px 10px 10px

                    font-family:sans-seif;

                }

        </style>

</head>

    <body>

    <h1>xxxxxxxxx</h1>

    <h2>xxxxxxxxxx</h2>

    <p>xxxxxxxxxxxx</p>

    </body>

</html>

方法2，在html文件中引入外部css样式文件（建议使用此方法）

将html文件中的<style>标签删除，在原位置改写为如下代码：

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

link元素用于链接外部信息，他是一个void元素

type属性是必需的，定义 style 元素的内容为 "text/css"

rel属性指定了html文件与所连接文件的关系，这里要链接一个样式表所以使用值“stylesheet”

href指定样式表的位置可以使路径或url

二.css文件的书写方法

在css文件中使用如下结构书写

1.为单个元素编写规则

元素（这里不需要加<>符号） {

    属性:参数;

    属性:参数;

    属性:参数;

    属性:参数;

        }

2.为多个元素编写规则

元素，元素（这里不需要加<>符号）  {

        属性:参数;

        属性:参数;

        属性:参数;

        属性:参数;

 }

三.css的一些可用属性

css文件中注释的写法：/*xxxxxx*/

background-color:xxx;设置背景颜色

border:xpx（边框的宽度） solid（实虚线） gray（颜色）;设置一个边框

border-bottom:xpx（边框的宽度） solid（实虚线） gray（颜色）;设置下边框的外观

color:设置字体颜色，这里可以设置为颜色代码

font-weight：这个属性控制文本的粗细，参数有bold(粗体)，normal（去掉粗体样式）oblique（倾斜文本）

font-style：这个属性设置斜体文字，参数有：italic

letter-spacing：在字母之间设置间距

top：控制元素顶部的位置

left：这个属性指定元素的左边所在位置

text-align使用这个元素将文本左对齐，居中或右对齐

text-decoration：对文本进行装饰，例如加入上划线(overline)，下划线(underline)，删除线(line-through)

line-height：这个属性设置一个文本元素中的行间距

background-image：这个属性在元素后面放置一个图像

四.html和css中类的概念

1.怎样设置一个类

（1）在html中加入以下参数

<元素 class="xxxx(类的名字)">

（2）在css设置如下参数

第一种：

元素.类的名字{

    属性：参数；

    属性：参数；

}

这只会选择类的名字所对应的元素

第二种：

.类的名字{

    属性：参数；

    属性：参数；

}

这会选择使用该类的名字中的所有元素

（3）单个元素可以加入多个类，写法如下

<元素 class="类的名字  类的名字  类的名字 ">

同一选择器下的其他元素如果没有特定元素会某人继承父元素的样式，有特定元素则使用特定元素，同一特定元素不同选择器的情况下，以css文件中最靠后的选择器的样式为准。

五.字体相关设置

1.使用font-family属性设置本地字体及网络字体

（1）使用本地字体，例子：

某元素(

font-family:字体名字,字体名字,字体名字"

)

其中可以设置为一个字体或多个字体，但多个字体要用逗号隔开

（2）使用网络字体

@font-face  {

     font-family:"字体名字"

     src:url("字体的url"),

            url("字体的url");

元素{

            font-family:”上面设置的字体名字“；

        }

2.使用font-size属性设置字体大小

字体大小设置的三种表示方法：1.关键字 2.em 3.百分数

常用方法：

1.选择一个关键字，指定它为body规则中的字体大小，这相当于页面字体大小

2.使用em或百分数，相对于body字体的大小指定其他元素的字体大小

补充：其中所有属性值的关键字为：small，thin，medium，thick（每个浏览器对关键字的大小定义不一样）

六.颜色设置相关

颜色参数的书写方法有三种分别是：

1.直接设置颜色对应的英文单词

2.使用rgb参数(具体数值去颜色工具上面查找)

例如

rgb（123,123,213）

或

rgb（10%,123%,123%）

3.使用十六进制码表示颜色(具体数值去颜色工具上面查找)

例如

#cc600