【Java Web】秒懂CSS样式！

目录

一、CSS的使用

二、CSS引用方式

三、CSS三大选择器

四、CSS浮动

五、CSS定位

六、CSS盒子模型

---

一、CSS的使用

css层叠样式表能够对网页中标签元素位置的排版进行像素级别的精确控制，支持几乎所有的字体和字号样式，拥有对网页对象和模型的样式编辑的能力，简单的说就是用来美化网页的。

二、CSS引用方式

• 行内式：通过标签的style属性引用样式

        语法：style="样式名：样式值；样式名：样式值；... ..."

        缺点：1.css样式代码的复用度低，不利于维护。2、css样式代码和html结构代码交织在一起，影响阅读、文件大小以及性能。

• 内嵌式：通过在head双标签内使用style双标签定义本页面的公共样式，此种方式需要使用选择器来指定css样式作用在本文件的哪些标签元素上。

        缺点：内嵌式定义的样式只能被本网页文件中的标签元素使用，而不能被其它html网页文件中的标签元素使用，因此内嵌式的样式复用还不够很好。

• 外部样式表：将css代码单独放到一个“.css"文件中，哪些html网页文件需要这些样式就在html网页文件的head标签中通过link单标签来引用。

        引用语法：<link href="被引用文件路径" rel="被引入的文件类型，要是css样式就填stylesheet" />

注意：用内嵌式或外部样式表的方式来引用css样式需要使用选择器来指定样式作用的标签元素有哪些。 

三、CSS三大选择器

选择器就是用来指定定义好的css样式对网页文件中哪些标签元素是生效的。

• 元素选择器：根据标签名来指定css样式作用的标签元素有哪些。

                语法：标签名{}

缺点：某些同名的标签元素不想使用某些样式但无法设置，不同名的标签元素想使用css样式但无法实现。

           

• id选择器：根据标签的id属性值来指定css样式作用的标签元素有哪些。

                语法：#id值{}

           

• class选择器：根据标签元素的class属性值来确定css样式作用的标签元素有哪些。

一个标签元素的class属性可以有多个值即此标签享有多个css样式。

                语法：.class属性值{}

四、CSS浮动

css的浮动就是使元素脱离文档流，使其按照指定的方向(左或右)移动，直到它的外边缘碰到包含它的父边框或其它的浮动元素为止，总之就是它让出的位置空间会被其它的元素所侵占这就是浮动。

说明：

1、浮动后的元素所占用位置上的文字会被挤到其它地方去

2、通过浮动可以使不在同一行的块元素改变为在同一行上并且对其大小的设置不会失效。

例如：

五、CSS定位

通过css的position样式属性可以设置标签元素在页面中的位置即用来规划设计页面元素的布局。

position样式用来设置元素的位置属性

static: 元素原本在文档流中的位置，行内元素水平方向从左向右，块元素垂直方向从上往下，标签元素默认就是此属性值。

absolute: 绝对定位，根据页面来进行定位，会脱离文档流。

relative: 相对定位，相对该元素原本的位置来定位，不会脱离文档流。

fixed: 相对定位，相对浏览器页面窗口定位，会脱离文档流（如广告）。

注意：top、bottom、left、right样式必须在标签元素设置了position样式除static的值后才能生效即需要与position配合使用。

六、CSS盒子模型

所有的html元素都可以看做为是个盒子，标签元素里面可以包含其它的标签，一个盒子包括：外边距（margin）、边框（border）、内边距（padding）和盒子实际可以包含的内容（content）例如：div元素。在css中“盒子模型”这个术语是用来设计和布局页面时使用的。

@声明：“山月润无声”博主知识水平有限，以上文章如有不妥之处，欢迎广大IT爱好者指正，小弟定当虚心受教！