CSS入门

来源：互联网发布：stm32f4 嵌入式数据库编辑：程序博客网时间：2024/06/03 15:58

1、CSS的概述

1）什么是CSS ？    Cascading Style Sheet 层叠样式表,是专门负责HTML的显示的2）CSS与HTML关系？    HTML    内容与结构    CSS 展示3）我们为什么要使用CSS ？

可以使页面内容与展示分离开，提高页面的可维护性。

2、CSS的核心语法

1）语法    选择器{        属性名1 : 值1;        属性名2 : 值2;        ……        属性名n : 值n[;] /* 建议使用 */    }    例：    p{        color : red;        background-color : yellow;    }2）HTML与CSS是如何结合到一起的？    a、在HTML的head标记中使用<style>标签嵌套CSS的定义        例：        <html>            <head>                <title>CSS练习1</title>                <style type="text/css">                    p{                        color:red;                    }                </style>            </head>            <body>                <p> 内容 </p>            </body>        </html>    b、在HTML的head标记中使用<link />标签来引入外部定义的CSS文件        例：<link href="css/Test01.css" type="text/css" rel="stylesheet"/>    c、在<style > 标记中 应用 @import url("路径"); 来导入外部定义的CSS样式        例：        <style type="text/css">            @import url("css/Test02.css");        </style>    d、在HTML的标记中使用style=""属性来定义CSS样式        例: <p style="background-color:yellow;">内容</p>

3、行内元素与块级元素

行内元素：占据的位置就是他本身的大小 <img > <b> <i> <u>

块级元素：无论内容的多少，都占据着整个浏览器的宽度

4、CSS选择器

（一）基本选择器    a、标记选择器：是由HTML的标记名称构成的选择器        例如：p,span,h1,h2,table,div    b、类别选择器：是由"."开始，并且选择器的名称是自定义的选择器        例如： .error,.red        <span class="error"></span>    c、ID选择器：由"#"开始，自命名的选择器        例如：            #container,#head,#bottom（二）复合选择器    a、交集选择器：由多个选择器组成，中间不加任何分隔符构成的选择器        例如：span.error,p.myp,div#head    b、并集选择器：由多个选择器组成，并且中间加","分隔        例如: p,h1,span{                color : red;            }    c、后代选择器：具有继承关系的标记中,中间需要加空格分隔的选择器。

例如：table tr td, ul li a,ol li

5、CSS需要记住的法则

1）优先级：行内样式>ID选择器>类别选择器>标记选择器2）叠加原理：实际显示的样式=所有样式之和3）继承：子元素可以从父元素那里继承属性4）覆盖：具有继承关系的元素，如果父元素与子元素属性一致时，显示子元素的属性

1、CSS常用属性

1、与背景相关的属性    background-color    设置背景色(三种方式：颜色名、颜色值、rgb)    background-image    设置背景图片    background-repeat   设置背景排列方式（no-repeat、repeat、repeat-x、repeat-y）    background-attachment   设置背景背景图片是否与内容一起滚动(fixed、scroll)    background-position 设置背景的位置    可以对背景属性进行简写,顺序如下：        background-color        background-image        background-repeat        background-attachment        background-position    即：background:pink url("./images/common.jpg") repeat fixed top left;2、与文本相关的属性    color       设置文字颜色    text-decoration 设置下划线的显示方式    letter-spacing  设置字符间距    word-spacing    设置单词间距    line-height 设置行高    text-align  设置文字对齐方式3、与字体相关的属性    font-size   设置字号    font-family 设置字体    font-style  设置样式    font-weight 设置文字的粗细4、与列表相关的属性    list-style-type     设置类型    list-style-position 列表项标记的放置位置    list-style-image    使用图片替换掉列表的符号    5、与表格相关的属性    border-collapse     设置单元格边框是否合并6、与边框相关的属性    border 参考API与Test06.html7、与尺寸相关的属性    /* 设置尺寸 注意：只有块级元素才可以设置 */        width:500px;        height:200px;        参考API与Test06.html8、外边距    margin    参考API与Test07.html    块与块之间的间距使用比较大的块的距离9、内边距    padding    参考API与Test08.html

padding:20px 50px 100px 10px;

2、伪类的使用

超链接伪类的使用    a:link      未被访问的超链接样式    a:visited   被访问过的超链接的样式    a:hover     鼠标悬浮时的样式    a:active    被激活时的样式

1、CSS的浮动与定位

1）浮动 float : left | right;说明：一旦一个元素浮动以后，那么它脱离了“普通流”,其他的元素就可以占据它    原来的位置,其他元素会受到它的影响。普通流：在HTML中所有元素都有默认的布局方式，行内元素，只占据可以容纳其内容    的空间，是从左到右进行排列的。块级元素，是垂直排列的。我们把这种默认    的布局方式，成为"普通流"。2）清除浮动clear : left | right | both;说明：如果，不想让该元素受到其它浮动元素的影响，可以采用clear属性来清除浮动。3）定位 positionposition : static(普通流) | relative(相对定位) | absolute(绝对定位)relative : 相对定位说明：其它元素不会占据该元素的原来的位置absolute : 绝对定位说明：其它元素可以占据该元素的原来的位置top    : 距上边距的距离left   : 距左侧的距离right  : 距右侧的距离bottom : 距下方的距离

z-index: -X | 0 | X 值越小越容易被其它元素遮挡

2、盒子模型

参考API与Test05.html

3、CSS布局

1）三行一列2）三行一列,中间两列3）上两列，中间三列

1、CSS的滑动门

参考Test01.html把行内元素转换成块级元素

display:block;

2、CSS精灵

参考Test02.html

1 0