欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS入门 >

聊聊前端中的页面样式CSS

 

前面我们了解了HTML的标签

今天我们来一起聊聊CSS的样式

昨天咱们用table标签布局了一个注册的页面~,但是table的布局存在一定的缺陷就是都写死了,不利于修改~

现在一般采用DIV+CSS来进行布局,那我们来一起聊聊吧~

什么是DIV?

Div是HTML标签,一个块级元素(单独占一行).单独使用没有任何意义,必须和CSS联合起来一起使用,主要用于页面的布局,

 

聊聊前端中的页面样式CSS~

 

 

 

span 是一个HTML标签,一个内联元素,单独使用没有任何意义,必须和CSS联合起来一起使用,主要用于对括起来的内容进行样式的修饰.

 

聊聊前端中的页面样式CSS~

 

 

 

什么是CSS?

1)CSS是指层叠样式表(Cascading Style Sheets),样式定义的是HTML元素是如何显示的。

2)把样式添加到HTML页面中,是为了解决内容与表现分离的问题

3)外部样式通常存储在CSS文件中,使用外部样式可以极大的提高工作效率

CSS的作用

HTML是整个网站的骨架

CSS是对网站骨架的内容进行美化

CSS的语法和规范

选择器{

属性 1:属性值 1;

属性 2:属性值 2;

属性 3:属性值 3;

}

CSS选择器

CSS的基本选择器有三种:

 

元素选择器

如果多个相同的元素设置相同的样式,使用此选择器最合适.

元素名{

属性 1:属性值 1;

属性 2:属性值 2;

属性 3:属性值 3;

}

 

聊聊前端中的页面样式CSS~

 

 

 

类选择器

对多个元素设置相同的样式,此时使用类选择器比较合适

.类名{

属性 1:属性值 1;

属性 2:属性值 2;

属性 3:属性值 3;

}

 

聊聊前端中的页面样式CSS~

 

 

 

ID选择器

id是唯一的

#ID{

属性 1:属性值 1;

属性 2:属性值 2;

属性 3:属性值 3;

}

 

聊聊前端中的页面样式CSS~

 

 

 

CSS的其他选择器

层级选择器

层级选择器设置元素样式的语法

元素名 子元素名{

属性 1:属性值 1;

属性 2:属性值 2;

属性 3:属性值 3;

}

 

聊聊前端中的页面样式CSS~

 

 

 

属性选择器

元素名[属性名="属性值"]{

属性 1:属性值 1;

属性 2:属性值 2;

属性 3:属性值 3;

}

 

聊聊前端中的页面样式CSS~

 

 

 

CSS的引入方式

有三种:

1)行内引入

 

聊聊前端中的页面样式CSS~

 

 

 

2)内部引入

 

聊聊前端中的页面样式CSS~

 

 

 

3)外部引入

 

聊聊前端中的页面样式CSS~

 

 

 

关于这三种方式的优先级问题:

就近原则:

谁离需要修饰的元素近,谁的样式生效,其它的被覆盖掉~

行内样式>内部样式>外部样式

今天就先到这里了

再见了

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r50849.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-09-12 22:28 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。