首页 > > 网页制作 > css >

CSS简介

2018-06-24 01:08:05来源：未知阅读 ()

什么是CSS

css,Cascading Style Sheets,层叠样式表.主要用于设置html页面的外观显示样式.

css具有层叠性和继承性

层叠性指多种css样式可以叠加,效果按权重比例.一级256 1000 内联> id > 类 > 标签 >伪对象 >* >继承,!important最优先, 继承样式权重为0.

继承性指css样式子标签会继承父标签的某些样式.(边框外边距内边距背景定位元素宽高盒子相关属性都不可继承')

CSS的编写方式

1.浏览器样式:不同浏览器自带默认样式设置.

2.内联样式

<span style="color:red;"><span>

3.内部样式

<head>
<style> p {color:red;}</style>
</head>

4.外部样式

通过link标签引入css样式文件

<link rel="stylesheet" href="a.css" />

CSS选择器

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        /*选择器
        所有标签 *
        ID选择器 #id
        类选择器 .类
        */
        /*子元素   */
        h1 > strong {
          color: pink;
        }
　　　　　h1 strong{后代选择器}
        h1 + strong{相邻兄弟选择器}  
        /*属性选择器*/
        h2[class]{
          color:red;
        }
        h2[class="h2"]{
          color:yellow;
        }
        h2[class~="h"]{
          /*属性名全包*/
          color:green;
        }
        h2[class^="h"]{} /*属性名开头*/
        h2[class$="h"]{} /*属性名结尾*/
        h2[class*="h"]{} /*属性模糊匹配包含h*/
        </style>
    </head>
    <body>
      <h1>
        <strong>test</strong>
      </h1>
      <h2 class="">
        <strong>test</strong>
      </h2>
      <h2 class="h">
        <strong>test</strong>
      </h2>
      <h2 class="h2">
        <strong>test</strong>
      </h2>
    </body>
</html>

CSS伪类

:link 伪类将应用于未被访问过的链接。IE6不兼容，解决此问题，直接使用a标签。

:hover 伪类将应用于有鼠标指针悬停于其上的元素。在IE6只能应用于a连接，IE7+所有元素都兼容。

:active 伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。

:visited 伪类将应用于已经被访问过的链接

:focus 伪类将应用于拥有键盘输入焦点的元素。

CSS伪元素

伪元素能够在文档中插入假想的元素,从而得到某种效果.css2.1中定义了4个伪元素

设置首字母样式　

h2:first-letter{font-size: 200%;}

设置第一行的样式只试用于mei每一段所显示的第一行文本

 p:first-line{color:hotpink;}

设置之前和之后元素的样式

 p:before{content: "before"}
 p:after{content: "after"}
 <p> test </p>

部分CSS属性

letter-spacing:定义字间距

word-spacing:定义英文单词之间的间距

white-space:空白符处理

word-break:自动换行

word-wrap:normal break-word属性允许长单词或URL地址换行到下一行

display inline-block IE兼容问题

IE6,7支持inline元素转换成inline-block，但不支持block元素转换成inline-block，所以非inline元素在IE6,7下要转换
成inline-block，需先转换成inline，然后触发hasLayout，以此来获得和inline-block类似的效果。

div {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

border属性

1.表单的边框通常改为 0；
border:0 none;//兼容所有浏览器
2.表格的细线边框
table { border-collapse:collapse; }
3. 轮廓（链接有虚线和文本框有蓝色边框）
outline-style:none;

浮动

html页面的元素排列正常是块级元素独占一行,行内元素从左向右,从上向下排列,这种情况叫做标准流.按照这种情况布局,绝对不会出现例外的情况叫做标准流布局,也叫做流式布局.

浮动float,可以让盒子向左向右浮动,脱离标准流,不占位置,但是会影响标准流.

父容器高度塌陷:如果父盒子没有设置高度,其子元素全部浮动,就会造成塌陷.解决这一问题:1给父盒子设置高度.2给父盒子设置overflow:hidden.3空标签清除浮动clear.4伪元素清除浮动.

布局

定位

元素的定位position主要有static,relative,absolute,fixed.

relative:相对定位,相对本身原位置进行定位,在文档流中的位置仍然保留.

absolute:绝对定位,相对其最近的已经定位的父元素进行定位,原位置不保留.

fixed:固定定位.固定在该位置.脱离标准流控制.

z-index:当元素设置多重定位时,元素可能会发生重叠.z-index就是显示先后层级.默认为0.

背景　　

background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 设置元素的背景图像。
background-position 设置背景图像的开始位置。
background-repeat 设置是否及如何重复背景图像。

background合写的顺序：背景颜色、背景图地址、平铺设置、背景图滚动、背景图位置。　　

精灵图

网页上每张图像都要经过一次请求才能展现给用户.为了减少请求量,就对一些小的图片进行修饰,合并成一张精灵图.页面元素通过定位精灵图的不同位置得到小图.

滑动门

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。

消除inline-block中的空隙
行内块之间会有缝隙，去掉的方法
1. 去除空格，把代码放在一行上。
2. 使用margin负值。
3.给父级添加font-size:0；
4.使用letter-spacing或者 word-spacing
5、使用float的方式

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有