CSS笔记

1. CSS简介

  • 作用: 1.专门给网页进行样式开发. 2.给网页进行布局

  • 特点: 1.语言特别简单. 2.开发的样式可以重复使用

  • 使用:

    • css的声明
    • css的选择器
    • css的常用样式
    • css的盒子模型
    • css的定位
    • css的布局

2. css的声明

1.声明:
  • 位置: 在头标签(head)中使用style标签声明

    作用: 公共样式或某个标签的单独样式

            
    
  • 位置: 在标签上使用style属性进行声明

    作用: 直接作用于当前标签


    "background-color:blue;height:50px"/>
  • 位置: 在head标签中使用link标签引入声明好的css文件

    作用: 此声明相当于调用

    hr{
           
        width:50%;
        height:20px;
        color:gray;
        background-color:gray;
    }
    
    "stylesheet" type="text/css" href="css声明.css">
    
2.注意:

如果css的声明全都在head中,则遵循就近原则,谁离标签近,就会被显示

3. css的选择器

1.css选择器:

​ 标签选择器

​ 标签名{样式1:样式1值;…}

​ 作用:给当前网页中所有的该标签增加相同的样式

​ id选择器

​ #标签的id{样式1:样式1值;…}

​ 作用:给某个指定的标签增加指定的样式

​ 类选择器

​ .类选择器名{样式1:样式1值;…}

​ 作用:给不同的标签添加相同的样式

​ 全部选择器

​ *{样式1:样式1值;…}

​ 作用:选择所有的HTML标签,并添加相同的样式

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

​ 组合选择器

​ 选择器1,选择器2,…{样式1:样式1值;…}

​ 作用:解决不同选择器之间重复样式的问题

​ 子标签选择器

​ 选择器1 子标签选择器{样式1:样式1值;…}

​ 作用:解决子标签样式问题

​ 属性选择器

​ 标签名[属性名=属性值]{样式1:样式1值;…}

​ 作用:选择某标签具备某属性并且属性值为某属性值的标签的样式

2.css的使用过程:

​ 1.声明css代码块

​ 2.使用选择器选择要添加样式的标签

​ 3.书写样式单

3.例子

<html>
    <head>
        <title>title>
        <meta charset="utf-8">

        
        <style type="text/css">
        /* 标签选择器 */
            table{
      
                width:300px;
                height:200px;
                border:solid 1px;
            }

        /* id选择器 */
        #t1{
      
            background-color:red;
        }
        /* 类选择器 */
        .commen{
      
            color:yellow;
        }
        /* 全部选择器*/
        *{
      

        }
        /*组合标签选择器*/
        .commen,table{
      
            color:blue;
        }
        /*子标签选择器*/
        ul li a{
      
            color:black;
        }
        #p1 a{
      
            color:yellow
        }

        /*属性选择器*/
        input[type="password"]{
      
            background-color: red;
        }
        style>
    head>
    <body>
        <h3 align="center">css的选择器学习h3>
        <hr />
        <hr class="commen"/>
        <table id=t1 >
            <tr>
                <td>td>
                <td>td>
                <td>td>
            tr>
            <tr>
                <td>td>
                <td>td>
                <td>td>
            tr>
            <tr>
                <td>td>
                <td>td>
                <td>td>
            tr>
        table>
        <table class="commen">
            <tr>
                <td>td>
                <td>td>
                <td>td>
            tr>
            <tr>
                <td>td>
                <td>td>
                <td>td>
            tr>
            <tr>
                <td>td>
                <td>td>
                <td>td>
            tr>
        table>
        <ul>
            <li><a href="">哈哈a>li>
            <li><a href="">嘿嘿a>li>
            <li><a href="">呵呵a>li>
        ul>

        <p id="p1">
            <a href="">嘻嘻a>
        p>
        <p>
            <a href="">ha嘻a>
        p>
        
        <input type="text" name="t" id="" value="">
        <input type="password" name="" id="" value="">
    body>
html>

4. css的常用样式

1.边框设置
border:solid 1px;
2.字体设置

font-size:10px;

font-family:“黑体”;

font-weight:bold;设置字体加黑

3.字体颜色设置

color:颜色;

4.背景颜色设置

background-color:颜色;

5.背景图片设置

background-img:url(图片路径);

background-repeat:no-repeat;图片不重复

background-size:cover; 图片平铺整个页面

6.宽高设置
7.浮动设置

float:left/right

8.行高设置

line-height:10

5. css的盒子模型

1.div(分割)标签:

​ 块级标签,主要是用来进行网页布局的,会将其中的子元素内容作为一个独立的整体存在.

​ 特点:

​ 1.默认宽度是页面的宽度,但是可以设置

​ 2.高度默认是没有的,但是可以设置

​ 3.如果子元素设置了百分比的高或者宽,占据的是div的百分比,不是页面的.

2.盒子模型:

外边距:margin

​ 作用:用来设置元素与元素之间的间隔

​ 居中设置:margin: 0px auto;上下间隔为0,水平居中.

​ 可以根据需要单独设置上下左右的外边距.

边框: border

​ 作用: 用来设置元素之间的边框大小

​ 可以单独设置上下左右边框

内边框: padding

​ 作用: 用来设置内容与边框的距离

​ 注意: 内边距不会改变内容区域的大小

​ 可以单独设置上下左右内边距

内容区域:

3.例子

<html>
    <head>
        <title>css盒子模型的学习title>
        <meta charset="utf-8">
        <style type="text/css">
            #div01{
      
                border:solid 5px;
                width:200px;
                margin-left:20px;
                margin:0px auto; /*上下间隔是0px,水平居中*/
                padding:20px;   /*内容与边框的间距*/
            }
            #div02{
      
                width:200px;
                border:dashed 30px;
                margin-bottom: 10px;
                margin-left:20px;
                margin:10px auto;
                padding: 20px;
            }

        style>

    head>
    <body>

        <div id="div01">
            <h3 align="center">this is a divh3>
        div>

        <div id="div02">
            <h3 align="center">this is a divh3>
        div>
    body>
html>

6. css的定位

(position)

1.相对定位:

relative

​ 作用:相对元素原有位置移动指定的距离(相对于自己原有的位置)

​ 可以使用top,bottom,left,right移动

​ 其它元素不改变位置

2.绝对定位:

absolute

​ 作用:参照父元素位置移动指定的距离

​ 可以使用top,bottom,left,right移动

​ 注意:如果父级元素成为参照元素,则必须使用相对定位属性

3.固定定位:

fixed

​ 作用:固定在某一位置,不会随着滚动条的滚动而移动位置

​ 可以使用top,bottom,left,right移动

4.例子
<htlm>
    <head>
        <title>css定位学习title>
        <meta charset="utf-8">
        <style type="text/css">

            #div1{
      
                border:solid 1px black;
                width: 300px;
                height: 200px;
                margin:10px;
                position:relative;
            }
            #div11{
      
                border:solid 1px black;
                width: 30px;
                height: 20px;
                margin:10px;
                position: absolute;
                top:100px;
            }
            #div2{
      
                border:dashed 1px black;
                width: 300px;
                height: 200px;
                margin:10px;
                background-color: blue;
                position: relative;
                bottom:-30px;
            }
            #div3{
      
                border:solid 1px black;
                width: 300px;
                height: 200px;
            }
            #div4{
      
                border:solid 1px black;
                background-color: red;
                width: 30px;
                height: 30px;
                position:fixed;
                right:20px;
                top:200px;
            }

        style>

    head>
    <body>

                <div id="div1">
                    <div id="div11">div>

                div>
                <div id="div2">

                div>

                <div id="div3">

                div>
                <div id="div4">

                div>
                <br><br><br><br><br><br><br><br><br><br><br><br><br>
    body>
htlm>

你可能感兴趣的