CSS基础

什么是CSS?

英文全名：cascading style sheets(百度百科) === cascading style sheet 层叠样式表

WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制，

简单说就是如何修饰网页信息的显示样式。

目前推荐遵循的是W3C发布的CSS3.0. 用来表现XHTML或者XML等样式文件的计算机语言。

1998年5月21日由w3C正式推出的css2.0。

CSS语法

（1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；

（2）属性必须放在花括号中，属性与属性值用冒号连接。

（3）每条声明用分号结束。

（4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序,用空格隔开。

（5）在书写样式过程中，空格、换行等操作不影响属性显示。

CSS写法 

内部样式的创建

外部样式的创建 

　　　　扩展知识点：link和import之间的区别？

行内样式的创建 

 选择器

为什么要用选择器？

要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器

元素选择符/类型选择符(element选择器)  

如：div(width：100px；height：100px；background：red；)

语法：元素名称(属性:属性值;}

如：div，p，h1，img，a，span，i，em，strong，b，ul，li，ol，li...等

说明：

（a)元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。

例如body，div，p，img，em，strong，span..….等

（b)所有的页面元素都可以作为选择符，

用法：

（1)如果想改变某个元素得默认样式时，可以使用类型选择符:

(如:改变一个div，p，h1样式)

（2)当统一文档某个元素的显示效果时，可以使用类型选择符

 

(如：改变文档所有p段落样式)

class选择器/类选择器

语法：class名{属性:属性值;}

说明：

（A)当我们使用class选择符时，应先为每个元素定义一个class名称

（B)class选择符的语法格式是：

如：<div class="top"></div>

.top{width；200px；height；100px；background；green;)

用法：class选择符更适合定义一类样式；

id选择器

语法：#id名{属性：属性值；}

说明：

（A)当我们使用id选择符时，应该为每个元素定义一个id属性

如:<div id="box"></div>

（B)id选择符的语法格式是“#”加上自定义的id名

如:#box{width：300px；height：300px；}

（C)起名时要取英文名，不能用关键字:(所有的标记和属性都是关键字)

如:head标记

（D)一个id名称只能对应文档中一个具体的元素对象。(唯一性)

*通配符/通配选择器

语法：*{属性：属性值；}

说明：通配选择符的写法是“*”，其含义就是所有元素。

*{margin：0；padding：0；}代表清除所有元素的默认边距值和填充值；

群组选择器

语法：选择符1，选择符2，选择符3……(属性：属性值；}例:#top1，#nav1，h1{width：960px；}

说明：当有多个选择符应用相同的声明时，可以将选择符用“，”分隔的方式，合并为一组。

margin：0 auto；实现盒子的水平居中

包含选择器/后代选择器

语法：选择符1　选择符2 属性：属性值；)

说明：含义就是选择符1中包会的所有选择符2；

用法：当我的元素存在父级元素的时候，我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式照决

如：

   结构：<ul class="list">

           　 <li></li>

            　<li></li>

            　<li></li>

        </ul>

　　样式: .list li{background:red；)

伪类选择器

语法：

a：link{属性：属性值；}超链接的初始状态；

a：visited{属性：属性值；}超链接被访问后的状态；

a：hover{属性：属性值；}鼠标悬停，即鼠标划过超链接时的状态；

a：active{属性：属性值；}超链接被激活时的状态，即鼠标按下时超链接的状态;

Link--visited--hover--active。

说明:

（A)当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为:

a：link，a：visited，a：hover，a：active，错误的顺序有时会使超链接的样式失效;

（B)为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中:

 

例如：a{color：red；} a：hover{color：green；}表示超链接的初始和访问过后的状态一样 鼠标划过的状态和点击时的状态一样。

选择器的权重

当多个选择器，选中的是同一个元素，且都为他们定义了样式，如果属性发生冲突了，会选择权重高的来执行。

 css-文本属性

 

 css-列表属性

 css-背景属性

 css-浮动属性

 

 

 

 css-盒子模型

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。

css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型

Padding属性

1、padding的使用方法（内间距）当分析一个缝隙相对于当前容器来说是里面的时候，就用padding。

填充：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白。

用法：

（1）用来调整内容在容器中的位置关系

（2）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值

 属性值的4种方式：

四个值：上 右 下 左 {padding:0px 0px 0px 40px;}

三个值：上 左右 下 {padding:10px 20px 30px ;}

二个值：上下 左右 {padding:10px 20px ;}

一个值：四个方向 padding:2px;/*定义元素四周填充为2px*/

说明：可单独设置一方向填充，

如：上方向padding-top:10px; 右方向padding-right:10px; 下方向padding-bottom:10px; 左方向padding-left:10px;

Boder属性

border:边框宽度 边框风格 边框颜色;

边框宽度：border-width:

边框颜色：border-color:

边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)

简写：border：30px solid blue; 参数的顺序可以随意调换

单边框设置：上边框  border-top：30px blue solid;  下 border-bottom 左  border-left 右 border-right

Margin属性

margin的使用方法

边界：margin,在元素外边的空白区域，被称为边距。

margin-left:左边界      margin-right:右边界  margin-top:上边界    margin-bottom:下边界

属性值的4种方式：margin可以给负数

四个值：上 右 下 左      三个值：上 左右 下     二个值：上下 左右

一个值：四个方向 margin:2px;/*定义元素四边边界为2px*/

margin:0 auto;/*一个有宽度的元素在浏览器中横向居中。*/

 css-溢出属性

1、溢出属性(容器的)

说明:

overflow：visible/hidden(隐藏)/scroll/auto(自动)/inherit,

visible：默认值，溢出内容会显示在元素之外;

hidden：溢出内容隐藏;

scroll：滚动，溢出内容以滚动方式显示;

auto：如果有溢出会添加滚动条，没有溢出正常显示;

inherit：规定应该遵从父元素继承overflow属性的值。

overflow-x：X轴溢出；overflow-y：Y轴溢出

2、空余空间

说明:

white-space：normal/nowrap/pre/pre-wrap/pre-line /inherit 该属性用来设置如何处理元素内的空白;

normal：默认值，空白会被浏览器忽略，

nowrap：文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止;

3、省略号显示

说明:

text-overflow：clip/ellipsis；

clip：默认值，不显示省略号(...)；

ellipsis：显示省略标记；

 

当单行文本溢出显示省略号需要同时设置以下声明:

1、容器宽度：width：200px；

2、强制文本在一行内显示：white-space：nowrap；

3、溢出内容为隐藏：overflow：hidden；

4、溢出文本显示省略号:text-overflow：ellipsis；

css-元素显示类型

 

 css-定位

 css-精灵图

CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图

一、将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background position”来实现背景图片的定位技术。

 css-宽高自适应

自适应

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子 元素自动调整 这就是自适 

宽度自适应高度自适应

(1)宽度自适应

元素宽度的默认值为auto

(2)高度自适应

元素高度的默认值{height：auto；}

浮动元素的高度自适应

父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷

方法1:给父元素添加声明overflow：hidden；(缺点：会隐藏溢出的元素)

方法2:在浮动元素下方添加空块元素并给该元素添加声明：clear：both；height：0；overflow：hidden；

(缺点:在结构里增加了空的标签，不利于代码可读性，且降低了浏览器的性能)

方法3:万能清除浮动法

选择符after{content："clear：both；display：block；height：0；visibility：hidden；/overflow：hidden；)

伪元素

（1)：after(与content属性一起使用，定义在对象后的内容。)

如：divafter{contenturl(logo.jpg)；

div：after{content："文本内容"；}

（2):before与content属性一起使用，定义在对象前的内容

如：div：before{content："在其前放内容"；}

（3)：first-letter：定义对象内第一个字符的样式。

（4)：first-line：定义对象内第一行文本的样式。

窗口自适应

盒了根据窗口的大小进行改变

设置方法：html，body{height：100%；}

calc()函数的使用

calc()函数：用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width：calc(100% - 10px)

任何长度值都可以使用calc()函数进行计算；

calc()函数支持"+"，"-"，"*","/"运算；

calc()函数使用标准的数学运算优先级规则；