web 学习笔记2-CSS

最新推荐文章于 2024-02-07 10:59:30 发布

pin-csdn

最新推荐文章于 2024-02-07 10:59:30 发布

阅读量448

点赞数 1

分类专栏： Web 文章标签： web

本文链接：https://blog.csdn.net/gaopinqiang/article/details/62247048

版权

Web 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

1、CSS的基本概念：

CSS：Cascading Style Sheet 层叠样式表
CSS 作用就是给HTML页面标签添加各种样式
为什么要用CSS呢？
HTML的缺陷： 
    1. 不能够适应多种设备
    2. 要求浏览器必须智能化足够庞大
    3. 数据和显示没有分开
    4. 功能不够强大
例如每个样式都要在html中写一遍，很冗余，而且会增加传输的流量。

CSS 优点：
    1.使数据和显示分开
    2.降低网络流量
    3.使整个网站视觉效果一致
    4.使开发效率提高了

2、CSS基本语法：

p{color：red;}

选择器{属性名：属性值 ;}
注意：
    选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号
    属性名和冒号之间最好不要有空格。

3、CSS和HTML的结合方式：

CSS代码理论上位置是任意的，但通常写在style标签里
CSS和HTML的结合方式有3种：
    a. 行级样式表:采用style属性,范围只针对此标签适用
        例如：
        <div style = "border:1px solid red ;">大家好</div>
    b. 内嵌样式表:采用<style>标签完成。范围针对此页面
    c. 外部样式表: 采用建立样式表文件。针对多个页面.
        引入样式表文件的方式:
            1):采用<link>标签
                例如:
                <link rel = "stylesheet" type = "text/css" href = "a.css"></link>
            2):采用import，必须写在<style>标签中，并且必须是第一句
                例如：
                @import url(a.css) ;

        两种引入方式的区别：
            外部样式表中不能写<link>标签,但是可以写import语句    

简单的示例：
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus?">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <link rel = "stylesheet" type = "text/css" href = "a.css"></link>
    <title>Document</title>
    <style type="text/css">
      /*
          CSS和HTML的结合方式:
               1. 行级样式表: 采用style属性完成
               2. 内部样式表: 采用style标签完成
               3. 外部样式表: 采用外部css文件完成
      */
     p{
        font-weight:bold;
        font-style:italic;
     }
    </style>
</head>
<body>
    <p>你好</p>
    <p>你好</p>
    <p>你好</p>
    <p style = "color:red">你好</p>
</body>

4、CSS选择器-基本选择器：

a.标签选择器:指的就是选择器的名字代表html页面上的标签
    p{
        color:red ;
        border:1px dashed green;
    }

b.类选择器：规定用圆点.来定义
    优点：灵活
    例如: 
    .one{
        background-color:#ff0099; 
    }

c. ID选择器：规定用#来定义
    例如: 
    #one{
        cursor:hand;
    }

d:通用选择器： 用*定义,代表页面上的所有标签。
    *{
        font-size:30px;
        margin-left:0px;
        margin-top:0px;
    }

这几个之间的区别：
    标签选择器针对的是页面上的一类标签.
    类选择器可以供多种标签使用.
    ID选择器是值供特定的标签(一个). ID是此标签在此页面上的唯一标识。

简单的示例：
<head>
<style type="text/css">
    /*
        a. 标签选择器: 就是选择了页面上一类标签
        b. 类选择器： 规定用圆点. 来定义
        c. ID选择器:  规定用#来定义 : 正对特定的一个标签用
        d. 通用选择器： 用*来定义
    */
    p{
        color:red;
    }
    *{
        padding:0px;
        margin:0px;
        color:yellow;
    }
    .one{
        border:1px solid red ;
    }

    #two{
        border:3px dashed green ;
    }
</style>
</head>
<body>
    <div class = "one">你好</div>
    <p>你好</p>
    <h1 class = "one">你好</h1>
    <h2 id = "two">你好</h2>
</body>

注意没有设置选择器就会使用通用的选择器。

5、CSS选择器-扩展选择器：

a. 组合选择器:采用逗号隔开。
    例如: p,h1,h2,.one,#two{color:red ; }

b. 关联选择器(后代选择器): 采用空格隔开。
    例如: h4 span i{color:red ; } 
    表示h4标签中的span标签中的i标签的样式
    h4和span和i标签不一定是紧挨着的。

c. 伪类选择器。
    1)静态伪类：规定是用:来定义.只有两个.只能用于超链接.
    :link表示超链接点击之前的颜色
    :visited表示链接点击之后的颜色

    例如:
        a:link{color:red ;}
        a:visited{color:yellow;}
    注意：
        a:link{}定义的样式针对所有的写了href属性的超链接(不包括锚)
        a{}定义的样式针对所有的超链接(包括锚)

    2)动态伪类: 针对所有的标签都适用。
    :hover : 是移动到某个标签上的时候
    :focus : 是某个标签获得焦点的时候
    :active : 点击某个标签没有放松鼠标时

    例如: 
        label:hover{color:#00ff00; }
        input:focus{
            background-color:#ff9999;
            border:1px solid red;
        }
        a:active{
            color:blue;
        }

简单的示例：
<style type="text/css">
    div,p,h1,.one,#two{
        border:5px double blue ;
    }
    h3 i   {
        color:red ;
    }
    a:link{
        color:red ;
    }
    a:visited{
        color:yellow;
    }
    input:focus{
        border:1px solid red ;
        color:green ;
        background-color:#ffcc99;
    }
    p:active{
        color:blue;
    }
    label:hover{
        cursor:hand;
    }
    table{
        width:300px;
        height:300px;
        border:1px solid red ;
        border-collapse:collapse;
    }
    table td{
        border:1px solid red ;
    }
    table tr:hover{
        background-color:#ffcc66;
    }
</style>
<body>
    <div>你好</div>
    <p>你好</p>
    <h1>你好</h1>

    <h4 class = "one">你好</h4>
    <h3>你好<b>你好<i>你好</i>你好</b>你好</h3><br>
    <i>你好</i>
    <a href = "" name = "">你好</a>
    <input type="text" name="">
    <label>你好</label>
    <table>
        <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>
</body>

6、CSS选择器-各种选择器的冲突：

CSS样式的冲突:
    1.ID选择器 > 类选择器 > 标签选择器
    2.行级样式表 > 内嵌样式表 > 外部样式表
    3.外部样式表的ID选择器  > 内嵌样式表的标签选择器

原则：就近原则

pin-csdn

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
web 学习笔记2-CSS

1、CSS的基本概念 2、CSS基本语法 3、CSS和HTML的结合方式 4、CSS选择器-基本选择器 5、CSS选择器-扩展选择器 6、CSS选择器-各种选择器的冲突
复制链接

扫一扫

专栏目录