什么是CSS:CSS,也称为层叠样式表(Cascading Style Sheets),主要用于控制页面布局和样式,如设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
CSS的基本语法:由两部分构成:选择器、一条或多条声明。每条声明由一个属性和一个值组成,使用花括号来包围声明,属性与值之间使用冒号(:)分开。定义多个声明时,每条声明之间用分号(;)隔开。 选择器{属性:值;属性:值;.....}
CSS分类:根据样式代码的分类,可分为行内样式、内嵌样式、外联样式。行内样式使用标签的style属性来定义。内嵌样式在<head>标签中使用<style>标签定义,type属性告知浏览器用css解析器去解析。行内样式和内嵌样式不推荐使用,外联样式复用性强,可维护性高,一般使用外联样式。
外联样式:外部样式使用一个普通文件保存,后缀名为.css。引用外联样式的两种方式:链接、导入。链接:使用<link>标签导入外部样式,<link rel="stylesheet" type="text/css" href="mystyle.css">。导入:较少使用,通常使用链接方式导入外部标签,@import"mystyle.css"。
@import与link的区别:1、所有浏览器都支持link,低版本IE不支持import部分。2、在整个页面加载完成后,才会加载@import导入的样式,如果网络不好就会先看到无样式的页面,闪烁一下后才会看到有样式修饰的页面。使用link导入的样式会先被加载,这样看到的就是有样式的页面。3、Javascript中不能被访问@import导入的样式,可以访问link导入的样式。
样式的优先级问题:无冲突-叠加,有冲突-行内样式》内嵌样式》外联样式。
选择器:CSS用于筛选需要应用样式的HTML的元素的集合,并将相应的样式应用到集合的所有元素上。
选择器的分类:
元素选择器:使用HTML标签作为选择器,例如:p{属性:值;属性:值;....}
类选择器:最常用的选择器,在HTML标签中class属性选择,选择器是以‘.’开头的字符串名字,例如:.test{属性:值;属性:值;....}
ID选择器:使用HTML中的id属性选择,选择器是一个以#开头的字符串。例如:#test{属性:值;属性:值;....}
通配符选择器:通配符选择器为“*”,匹配页面中的所有元素。例如:*{属性:值;属性:值;}
CSS属性:
background-color:设置元素的背景颜色
background-image:把图像设置为背景。属性值:url("图片地址");
color:设置文本颜色
text-align:对齐元素中的文本。属性值:left、center、right、justify
width:设置元素的宽度
height:设置元素的高度
盒子模型:HTML页面的默认布局基于盒子模型实现布局。首先根据盒子模型算出每个元素所占的显示区域大小,然后依次按从左到右,从上到下的顺序排列。当一个元素在当前行显示不下时,自动放到下一行中作为第一个元素开始显示。
所有HTML元素都有一个盒子模型,引入了三个重要的样式属性:
border:边框,它的默认值是0。HTML标签默认是没有边框的,如果设置了值就会有边框线显示。
padding:内边距,内容显示区域和边框之间的间隔。四周的内边距大小默认是相同的。
margin:外边距,边框和其它HTML标签的盒子模型之间的间隔。四周的外边距大小是相同的。
在CSS中,width和height指的是内容区域的宽度和高度。
定位:定义元素的位置。
position:把元素放置到一个静态的、相对的、绝对的位置中。