css网页HTML有什么关系?

普通的讲你可以把HTML比作是组成网页的框架,而css则是装饰美化网页的工具。
一个没有任何css的网页是排版混乱,凌乱无章的,没有美感的。

本文下来紧张先容下如何在网页中利用css,以及css包括哪些知识点,详细的css知识点会在往后逐一先容,一篇文章很难讲完。

html下css样式表的作用前端入门css 样式表简介 JavaScript

回顾下HTML根本

css是浸染于HTML标签上的,如果你还不是很熟习HTML,请先学习HTML的知识,再来学习css。

一个HTML标签如下构造:

标签(Tag)—— 元素名称,如a, div属性(Attribute)—— 元素属性,如href值(Value)—— 属性值元素(Element)—— HTML标记中所有的东西:属性、值和内容。
网页中如何利用css

网页中利用css一样平常有三种,行内样式,内部样式表及外部样式表。

1、行内样式

在html标签的style属性中写css代码,这样的办法便是行内样式。
行内样式有个缺陷便是对付页面中相同的元素必须每个元素都写一遍css代码,很未便利,以是这时须要利用内部样式表或外部样式表。

如下示例:

<html> <head><title>行内样式</title> </head><body> <p style="color:red;font-size:14px;">hello world!</p> </body> </html>

2、内部样式表

利用<style></style> 标签之间写css代码,便是内部样式表。
内部样式表缺陷便是当页脸庞杂的时候,不利于组织代码,把不同模块功能的css代码组织身分歧的css文件,这样更加清晰,便于组织掩护代码。

如下示例:

<html> <head> <title>内部样式表</title> <style type="text/css> h1{ color: red; }p{ color: bule; } </style> </head><body> <h1>标题1</h1> <p>hello world!</p> </body> </html>

3、外部样式表

利用<link href="css文件路径"> 的办法引入外部css 文件,这便是外部样式表,除此之外,在一个css 文件中还可以利用 @import "css文件路径" 引入其余一个css文件。

示例1:

<html> <head> <title>内部样式表</title> <link href="style.css" rel="stylesheet"> </head> <body> <h1>标题1</h1> <p>hello world!</p> </body> </html>

style.css

h1{ color: red;}p{ color: bule;}

示例2:

如下代码,在style.css 中利用@import引入一个home.css文件,

style.css

@import "home.css"h1{ color: red;}p{ color: bule;}

home.css

div{color: #ff00ff;}p{ color: red;}

这里特殊把稳下,home.css 里面的css 选择器如果和style.css 的一样,那么style.css 的样式效果会覆盖home.css 的效果,比如这里p标签终极显示为蓝色,而不是赤色。

css语法

css有三个部分组成:选择器、属性和值。

选择器 —— 用来查询选择HTML标签的属性 —— 设置HTML元素的各种样式值 —— 运用的样式值

例子:

#id{color: red;}p{color: green;}.head{color: blue; font-size: 12px;}

如上#id,p,.head 便是选择器,大括号里面冒号前面是属性,冒号后面是值,每行以分号结束。

css 注释

cs样式表中注释语句以“/”开始,以“/”结束,如下所示:

/这是注释//这是注释,可以多行 这是注释,可以多行/p{color: red; /玄色字体/}

css 的继续和冲突

css 的继续规则是一个html元素的子元素会继续它的所有上级元素样式,有时会把很多外层的的样式叠加在一起,如下示例:

<html> <style> body{ color:red; font-size: 12px; }div{ background-color: #0000ff;} </style> <body> <div> <p>段落笔墨</p> </div> </body> </html>

如上示例中,p段落包含在body中的div元素里,以是p段落继续了body 和 div 的样式,它将显示蓝色背景和赤色字体。

如果在上面的示例代码中,再加上 p{color: #ffffff;} ,这个时候,p元素中的笔墨显示什么颜色?答案是白色,为什么,这便是css 产生冲突了。

在同一个元素上利用了同一个css属性但不同值的时候,就会产生冲突,浏览器会按照末了定义的样式为准。

css知识点

1、css 选择器

2 、css优先级

3、css 间距 —— margin、padding

4、css 盒子模型

5、css字体和文本 —— font

6、css链接样式

7、css颜色和背景 —— color 、background

8、css边框和圆角 —— border

9、css显示 —— display

10、css定位 —— position

11、css浮动 —— float

12、css布局:flex弹性盒子

13、css相应式:媒体查询

14、css 过渡和动画

15、css渐变和阴影

16、css网格

末了

css (层叠样式表)它有很多属性,但是平时只会用到一小部分,学习css不能去世记硬背一大堆属性语法,这样没有多大用途,只须要节制基本的观点和常用语法,基本上就够用了,对付其它的属性在用的时候再查询文档就可以了。

关于css详细内容,后面会按知识点先容,感谢关注。

下一篇:前端入门——css 选择器