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

此篇博客是个人复习笔记,html和css学的时间过久了,忘得差很少了,最近要使用一下,因此从新打开html的书略读,后记录了标签,元素,属性的具体意义。css

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

Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于建立网页的标准标记语言html5

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

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

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

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

<style>标签用于为HTML文档定义样式信息网络

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

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

<style>元素应位于head部分中url

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

例如:

<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
相关文章
相关标签/搜索