【面向CSS--2.基础部分】

来源：互联网发布：网络数据传输方式编辑：程序博客网时间：2024/06/05 22:59

前言

1.什么是CSS

CSS ：Cascadeing Style Sheets，又称层叠样式表，级联样式表，样式表

2.CSS的作用

定义HTML页面中元素的样式，实现内容与表现的分离，实现代码的可重用性和可维护性

3.CSS与HTML之间的关系

HTML是内容的体现，而CSS是样式的修饰，如果CSS样式属性与HTML属性相冲突时，W3C建议尽量使用CSS属性去取代HTML属性。

4.使用CSS的方式

1.内联样式：将样式定义在元素的style属性中     语法：<p style="样式声明"></p>    样式声明：由多个属性和值组成  ex : style="属性:值;属性:值;"2.内部样式：将样式定义在html头元素<head></head>中    语法：<head>           <style>               声明样式规则            </style>        </head>    样式规则：由选择器和样式声明组成3.外部样式：将样式定义在外部的CSS文件中，在html页面中进行引入    语法：<link rel="stylesheet" href="CSS的url">

5.CSS样式特性

1.继承性：大部分样式可以被继承（上下级）2.层叠性：为一个元素定义多个选择器，当样式声明不冲突时，多个样式层叠为一个

1.尺寸与颜色

1.尺寸单位

px：像素  %：相对单位  pt：磅in：英寸  cm：厘米     mm：毫米em：相对于其父元素来设置字体大小rem：相对于根元素<html>来设置字体大小

2.颜色单位

1.英文单词: blue,red,green,black,yellow,pink...2.rgb(r,g,b):  r:0-255  g:0-255  b:0-2553.rgb(r%,g%,b%)4.#rrggbb:  0-9或a-f:  #000000 黑色    #ffffff 白色5.#rgb :  #11aaff --> #1af6.transparent : 透明色

3.尺寸属性

作用：用于设置元素的宽度和高度默认尺寸：    块级元素：        宽度：占据父元素的100%        高度：自适应    行内元素：        宽度：自适应        高度：自适应    宽度：width,,min-width,,max-width    高度：height,,min-height,,max-height    注意：1.块级元素，允许修改         2.非块级元素中，本身存在width和height属性元素是允许修改的，但不具备width和height属性的元素不能修改的。

2.字体

为你的网页设置一套你喜欢的字体样式，如果你不设置的话，不用担心，浏览器有它自带的一套样式，不过样子嘛，可就说不准了。

字体类型：font-family:"仿宋"，"微软雅黑",arial,"黑体"字体大小：font-size：px % em rem pt...字体加粗：font-weight：         value（整百倍数字100-900,600及以上为加粗,其实并没有加粗等级，只有正常字体与加粗）          normal 正常字体          bold 加粗（<h1-6>,<b>）字体样式：font-style：         normal 正常字体           oblique 斜体         intalic 斜体（<i>）简写：font:style weight size family 必须设置family的值，否则无效

字体格式相关属性

文本颜色 color：文本排列方式     属性：text-align    取值：left/center/right/justify文本修饰（线条修饰）    属性：text-decoration    取值：underline：下划线         overline：上划线         line-through：删除线         none：无线条样式（常用于链接）行高：行高高于字体本身，将呈现垂直居中的排列方式    属性：line-height：px首行文本缩进    属性：text-indent    取值：缩进的距离,以px为单位的数值文本阴影    属性：text-shadow    取值：h-shadow v-shadow blur color;

@font-face 规则

以前CSS3版本，网页设计师不得不使用用户计算机上已经安装的字体。现在使用 @font-face 网页设计师可以使用他/她喜欢的任何字体。

@font-face{    font-family: myFirstFont;    src: url(sansation_light.woff);}div{    font-family:myFirstFont;        font-size:20px;}

引入字体

3.溢出

使用尺寸属性限制元素大小时，如果内容所需要的空间大小大于元素本身，则会导致溢出的效果。溢出后的处理：属性：overflow     overflow-x:横向溢出处理     overflow-y:纵向溢出处理取值：1、visible:默认值，溢出可见     2、hidden:隐藏，溢出隐藏     3、scroll:滚动，元素会出现滚动条，当内容溢出时，滚动条可用     4、auto:自动，内容溢出时显示滚动条并且可用，不溢出没有滚动条

文本溢出？

text-overflow：规定当文本溢出包含元素时发生的事情，配合overflow使用取值：clip 修剪文本。默认     ellipsis 显示省略符号来代表被修剪的文本。     string 使用给定的字符串来代表被修剪的文本。配合：white-space:nowrap 强制不换行(一定)     width:20em 不允许出现半汉字截断

4.边框

围绕在元素内容和内边距外的线条。

属性：border:width style color;width:边框的宽度style:边框的样式    取值：       solid:实线          inset:内凹       dotted:虚线         outset:外凸       dashed:虚线color:边框的颜色单边框设置：   border-方向：width style color;          方向：top 上 bottom 下 left 左 right 右

div{    border:1px solid blue;    border-top:1px solid transparent;}

边框倒角

倒角：将元素的直角倒成圆角    属性：border-radius     取值：        具体数值-px        百分比-%  50%为圆形    单角设置：        border-top-left-radius:左上角        border-top-right-radius:右上角        border-bottom-left-radius:左下角        border-bottom-right-radius:右下角

div{    width:50px;    height:30px;    /*border-radius:5px;*/    border-radius:50%;}

边框倒角演示

边框阴影

属性：box-shadow取值：是由多个值组成的值列表，用空格分开     h-shadow:（必须）阴影在水平位置的偏移，值为正，向右偏，值为负，向左偏     v-shadow:（必须）阴影在垂直位置的偏移，值为正，向下偏，值为负，向上偏     blur:（可选）模糊距离     spread:（可选）阴影尺寸     color:（可选）颜色     inset:（可选）将默认外阴影改为内阴影box-shadow:h-shadow v-shadow blur spread color inset;

轮廓

绘制于元素周围的一条线，位于边框之外，一般作用于表单元素上，表单元素选中状态，轮廓会高亮(你设置或默认的样式)显示。属性：outline:width style color;     outline-widht:轮廓的宽度     outline-style:轮廓的样式     outline-color:轮廓的颜色     outline:none; 或 outline:0; 取消元素轮廓

5.盒模型

外边距：margin 边框以外所不容别的元素(定位或浮动的元素除外)靠近的安全距离。

两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值。

取值：1.px（可为负）  2.百分比 3.auto（水平方向，让块级元素左右居中对齐）margin：value 四个方向的外边距margin：value1 value2 （v1上下外边距 v2左右）margin：value1 value2 value3（上 左右 下）margin：value1 value2 value3 value4（上右下左）单边设置：margin-left：左外边距 top，bottom，right等

内边距：padding 元素内容距离边框的安全距离。

取值：1.px（可为负）  2.百分比padding：value 四个方向的外边距padding：value1 value2 （v1上下外边距 v2左右）padding：value1 value2 value3（上 左右 下）padding：value1 value2 value3 value4（上右下左）单边设置：padding-left：左内边距 top，bottom，right等

Box-sizing

作用：重新指定元素框模型的计算模式取值：1：content-box：默认值        width/height = border + padding + 内容区     2：border-box：元素的尺寸会包含边框和内边距        width/height = margin + border + padding + 内容区

6.背景

背景颜色

属性：background-color取值：合法的颜色值 transparent透明色

背景图像

属性：background-image取值：background-image：url（图片的路径）

背景图像平铺.

属性：background-repeat取值：repeat 默认值 水平垂直都平铺     no-repeat 无平铺效果 只显示一次图片     repeat-x：只在水平方向平铺     repeat-y：只在垂直方向平铺

背景图片固定

属性：background-attachment取值：1、scroll 滚动，默认值，背景图会随着文档而滚动     2、fixed 固定，背景图不会随着页面文档而发生滚动，一直保持在可视化区域中的固定位置处（页面文档要足够高，如body的高度）

背景图像定位

属性：background-position：x y取值：x y     x正右移负左移 y正下移负上移（也可以百分比）

背景图像的尺寸

属性：background-size：x y （也可以百分比，关键字）取值：x y   x% y%    cover containcover ：将背景图片扩大到足够大，使背景图片能够完全覆盖元素区域contain：将背景图片扩大，使背景图像有一边适应元素区域

背景简写方式：

background：color image repeat attachment position

注意：没有background-size，且background-size要在background下面写

7.渐变

渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

属性：background-image: 值：linear-gradient():线性渐变    radial-gradient():径向渐变    repeating-linear-gradient()：重复线性渐变    repeating-radial-gradient()：重复径向渐变

1.线性语法：background-image:linear-gradient(angle,color-point,color-point,color-point……)

angle：方向或角度，即渐变的填充方向    取值：关键字：to top：由下到上，to right：由左到右.......         角度：0deg~360deg（0deg ~ to top；90deg ~ to right......）color-point：每个颜色及其出现的位置，多个色标之间用”,”分割            位置可用 px 或 % ，也可以不写位置，将默认平均分配

/*从左到右的线性渐变，带有透明度*/#grad1 {  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */}/*一个重复的线性渐变*/#grad2 {  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);/* Safari 5.1 - 6.0 */  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);/* Opera 11.1 - 12.0 */  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);/* Firefox 3.6 - 15 */  background: repeating-linear-gradient(red, yellow 10%, green 20%);/* 标准的语法 */}

2.径向语法：background-image:radial-gradient(size at position,color-point,color-point……)

size at position：径向渐变的半径 和 圆心位置 100px at 50% 50%        可以不设置，将自动在元素中心处向外扩散size：圆的半径，px为单位position：圆心位置1.0px 0px ：将圆心设置在元素左上角2.50% 50%：将圆心设置在元素的中间位置3.关键字：top left等（top bottom right left）

/*形状为圆形的径向渐变*/#grad1 {  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */  background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */}/*颜色结点不均匀分布的径向渐变*/#grad2 {  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */  background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */  background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */  background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */}

浏览器的兼容性：

对于存在浏览器兼容性的属性，可以尝试增加浏览器前缀去实现渐变的显示，这部分在后面会有介绍。

浏览器前缀：    Firefox : -moz-   Chrome和Safari : -webkit-   Opera : -o-前缀的加载位置：    1、如果浏览器不支持属性的话，则将前缀加载到属性名称前            animation:scroll 5s;            -moz-animation:scroll 5s;            -webkit-animation:scroll 5s;            -o-animation:scroll 5s;    2、如果浏览器支持属性，但不支持值的话，则将前缀加载到属性值的前面            background-image:linear-gradient();            background-image:-webkit-linear-gradient();            background-image:-moz-linear-gradient();            background-image:-o-linear-gradient();

8.表格

1.表格的常用属性

1、边距属性:padding2、尺寸属性:width , height3、文本格式化属性:font-*  text-align,color,text-indent,... ...4、背景属性：背景色，背景图，渐变5、border属性6、vertical-align：在单元格中，设置文本的垂直对齐方式    取值： top / middle / bottom

2.表格的特有属性

1.边框分离合并：border-collapse    取值：1.separate:默认值，即分离边框模式         2.collapse：边框合并效果2.边框边距：border-spacing    取值：1.指定一个值，单元格间水平垂直距离相同         2.两个值：分别指单元格垂直间距 水平间距    注意：仅限于边框分离状态时使用3、标题位置：caption-side    取值：1、top：默认值，标题显示在表格之上        2、bottom：标题显示在表格之下4、显示规则：指定表格的布局方式   默认布局方式为 自动表格布局，即单元格的宽度实际上是由内容来决定的，与设定的值无关。   属性：table-layout   取值：1、auto 默认值，即自动表格布局        2、fixed 固定表格布局，即单元格的宽度以设定的值为主，而不取决于内容

自动表格布局 VS 固定表格布局

    1、自动表格布局        1、单元格大小会适应内容大小        2、缺点 ：表格复杂时，加载速度慢        3、适用于不确定每列大小的情况下使用        4、虽然算法较慢，但是能体现传统表格特点    2、固定表格布局        1、单元格大小取决于td中设置的值        2、优点：加载速度较快        3、确定每列大小时，可以使用固定表格布局        4、算法较快，缺点是不够灵活

9.列表

1.列表项标记

属性：list-style-type：取值：none 没有标示       disc  实心圆      circle 空心圆       square 实心方块

2.列表项图像

属性：list-style-image：url（图片路径）

3.列表项位置

属性：list-style-position：取值：outside 列表项标记位于内容区域之外（默认值）     inside 列表项标记位于内容区域之内

简写：list-style:type url position;
常用方式：list-style:none;

10.显示方式

一切皆为框

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 a 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

属性：display取值：none：隐藏，让生成的元素不显示            特点：脱离文档流即不占据页面空间     block：让元素显示和块级元素一致            特点：宽高可自由设置     inline：让元素显示和行内元素一致            特点：宽高由内容撑起来，上下外边距不起作用，左右起作用，内边距起作用     inline-block：让元素显示和行内块级元素一致            特点：行内块元素相邻时，行内块元素之间会有几像素的间距，可通过浮动，或设置margin-left:-5px解决

display除这些值之外，还有一个非常重要的值 flex ，这是 flexble box 弹性布局，会在后面高级部分说明。

11.显示效果

1.属性：visibility  作用：控制元素的可见性(显示/隐藏)  取值：1.visible默认值，可见的       2.hidden（隐藏元素，但依然占据页面空间）       3.collapse使用在表格元素上，删除一行或一列时，不影响表格整体布局注意：display:none 和 visibility:hidden区别    1、display:none脱离文档流，所以隐藏后不占据页面空间    2、visibility:hidden隐藏元素，但并不脱离文档流，导致空间依然占据2.属性：opacity   作用：改变元素的透明度  取值：0(完全透明) ~ 1(完全不透明)3.属性：vertical-align   作用：1.设置单元格内容的处置对齐       2.为行内快元素设置vertical-align，相当于设置该元素两端的文本相对于该元素的垂直对齐方式       3.设置图片两端的文本相对于图片的垂直对齐方式  取值：top/middle/bottom/baseline(默认，基线对准)

12.光标

鼠标在元素内的样式

属性：cursor取值：default：默认  not-allowed：禁止   pointer：小手         text：I        wait：等待（漏斗）   help：帮助

光标介绍

13.浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。浮动元素会脱离文档流，不在占据页面空间，其余元素依次补位，浮动元素会向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

属性：float取值：none 默认值，无浮动     right 右        left 左

浮动引发的特殊效果

    1、当父元素的宽度显示不下所有的浮动子元素时，最后一个将换行(有可能被卡住)    2、元素一旦浮动起来之后，那么宽高将变成自适应(非人为指定情况下)    3、元素一旦浮动起来之后，那么将变成块级元素，尤其对行内元素影响最大    4、文本，行内元素，行内块元素时采用环绕的方式排列的，是不会被浮动元素压在低下的，会巧妙的避开浮动元素

清除浮动

元素浮动起来之后，除了影响自己的位置之外，还会影响后续元素。如果后续元素不想被前面浮动元素所影响的话，可以使用清除浮动的效果来解决影响

属性：clear取值：1、none默认值，即不做任何清除操作     2、left清除当前元素的前面元素左浮动带来的影响。即当前元素不会上前占位，并且左边不允许有浮动元素。     3、right清除当前元素的前面元素有浮动带来的影响。即当前元素不会上前占位，并且右边不允许有浮动元素。     4、both清除前面元素左右浮动带来的影响

.list li{    float:left;    width:110px;    height:90px;    margin:5px;}.list:after{    content:"";    display:table;    clear:both;}

14.定位

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，取代了之前多年来使用多个表格完成布局的思想。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

position:规定元素的定位类型

取值：static：默认值，没有定位，元素出现在正常的流中     absolute：1.生成绝对定位元素，会脱离文档流，不占用页面空间                2.会相对于与他最近的已定位的祖先元素实现位置的初始化，               如果没有已定位的祖先元素，会相对于最初的包含块实现位置的初始化，如body，html     fixed：生成固定定位的元素，将元素固定于页面某一处，不会随着滚动条滚动发生变化     relative：生成相对定位的元素，相对于其正常位置进行定位，原本所占空间会被保留，实现元素位置微调时使用，如鼠标悬停。     ex：”left:20px” 会向元素的左方添加20像素

元素设置absolute及fixed定位后，宽高将变成可控制的，默认是根据内容撑开

已定位：absolute fixed relative

元素的位置：left 左 ， top 上 ，right 右 ，bottom 下     单位：px  %

利用position实现垂直居中（元素高度需要确定）

.title{     position: absolute;     top: 50%;     height: 100px;     margin-top: -50px; }

利用position实现全屏（隐性控制宽高）

#mark{    position:fixed;    top:0;    right:0    bottom:0;    left:0;    background:rgba(0,0,0,.8);    z-index:20;}

/* 根据定位设置页面尾部在网页高度足够时位于页面可视区域尾部，高度不够时，向下移动，位于页面尾部 */<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        *{box-sizing:border-box;}        html,body{padding:0;margin:0;}        html{width:100%;height:100%;}        body{            padding-bottom:100px;            position:relative;            min-height:100%;        }        #warp{            border:1px solid blue;        }        #warp:after{            content:'';            display:table;            clear:both;        }        #warp .header{            height:60px;            border-bottom:1px solid blue;        }        #main{            height:600px;        }        #foot{            height:100px;            width:100%;            position:absolute;            bottom:0;            border:1px solid red;        }    </style></head><body>    <div id="warp">        <div class="header">            这是头部        </div>        <div id="main">            这是主要内容区        </div>    </div>    <div id="foot">        这是尾部    </div></body></html>

z-index：设置元素的堆叠顺序。

设置元素的堆叠顺序，将一个元素放置于另一元素上方或下方，当你的css中有positiong属性值为absoulute,relative或fixed时，z-index此取值方可生效，属性取值越大，则被层叠在最上面，取值可为负，无单位，不指定z-index，则后来者居上，父子关系不能使用z-index，永远都是子压在父上

资源连接
菜鸟教程 css教程
菜鸟教程 css3教程
W3C css教程
W3C css3教程

阅读全文

0 0