css简介以及css的添加方法

什么是css?

CSS是Cascading Style Sheets的简称,CSS是用来美化网页中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离。

css的基本语法

1.选择器{属性:值;属性:值;…….}。注意:属性和属性值之间用冒号(:)隔开,定义多个属性时,属性之间用英文输入法下的分号;隔开。

Width:20px;宽

Height:20px;高

Background-color:red;背景颜色

font-size:24px;文字大小

text-align:left | center| right内容的水平对齐方式

text-indent:2em;首行缩进

Color:red;文字颜色

css的添加方法有几种?都有怎样的格式?

1.行内样式 :行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用!

<!--行内添加法-->

<!DOCTYPE html>

<html >

<head>

<meta charset="UTF-8">

</head>

<body>

<p >

css行内添加法

</p>

</body>

</html>

2.内嵌样式:即使有公共css代码,也是需要定义的,适合文件很少css代码也不多的情况下使用。如果一个网站中有很多的页面,每个文件都会变大,后期维护难度也很大。

<!--内嵌的样式-->

<!DOCTYPE html>

<html >

<style type="text/css">p{color:red;}</style>

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<p>内嵌样式的表示法</p>

</body>

</html>

3.单独文件样式:页面结构html代码和样式css代码完全分离维护起来比较方便,需要改变网站风格,只需要修改公共文件可以在同一个html文件中内部引用多个外部样式表!

css文件:

style.css

p{colo:red;/*设置文字颜色*/}

html文件:

<!DOCTYPE html>

<html >

<head>

<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" href="外部文件.css">

<head>

<body>

<p>css单独文件添加方法</p>

</body>

</html>

css优先使用那种添加方法?

1.多重样式可以层叠,可以覆盖

2.样式优先级按照"就近原则"

3.行内样式>内嵌样式>链接样式>浏览器默认样式!