CSS入门

深碍√TFBOYSˉ_ 2022-08-19 11:17 132阅读 0赞

--------------------

## 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.html
    
    7、与尺寸相关的属性
        /* 设置尺寸 注意：只有块级元素才可以设置 */
            width:500px;
            height:200px;
            参考API与Test06.html
    8、外边距
        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）定位 position
    position : 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