CSS学习笔记1

最新推荐文章于 2024-05-30 14:49:04 发布

computerismylife

最新推荐文章于 2024-05-30 14:49:04 发布

阅读量90

点赞数

文章标签： css

本文链接：https://blog.csdn.net/computerismylife/article/details/124112411

版权

前端学习之页面设计的外衣——CSS学习记录。

一、CSS引用方式

之前学习了HTML5的创建使用方法，我们可以设置简单的表格，用户注册表单，以及新闻报道页面，但实际中我们所见的这些”数据“往往都是经过加工修饰过的。这正是使用CSS来进行了美化的，那么CSS如何使用呢？

1、行内引入

可以在HTML5所有的标签内直接加入关键字 style 来引入。例：

<input style=" 所需设置属性"/>

案例1：（设置文本输入框的基本样式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内引入CSS</title>
</head>
<body>
    <input style="border: 1px solid red; height: 30px; width: 200px;" placeholder="请输入信息"/>
</body>
</html>

效果图：（左边为初始化的标签效果，右图为行内引入CSS样式的效果图）

2、内部引入

为了前期基础学习，简化HTML部分代码的负荷却达到美化页面的效果，常常使用内部样式引入。

<head>

<style type="text/css">样式属性设置（需要正确获取选择器来引入）

</style>

</head>

案例2：（设置）

效果图：

3、外部引入

归纳总结：CSS的引入方式具有优先级，即行内>内部>外部，也就是说，它的执行效果只显示优先级最高的样式。

二、CSS选择器

这里介绍了常用的12中选择器。

1、通用选择器

2、id选择器

3、class（类选择器）

4、分组/并集选择器

5、交集/限定类选择器

6、元素选择器

7、后代选择器

8、子选择器

9、相邻兄弟选择器

10、兄弟选择器

11、属性选择器

12、伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
    /* 1、id选择器，常用于HTML中唯一的标签元素，引用为#  */
    #nav {
        font-weight: bolder;
    }

    /* 2、类（class）选择器，可单独使用也可结合使用（即：类选择器名之间使用空格分开），引用为. */
    .importent.urgent {
        height: 50px;
        width: 100px;
        background-color: chocolate;
    }
    
    /* 3、通用选择器，整个页面的标签都可以使用，引用为* */
    * {
        margin: 0;
        padding: 0;
        text-decoration: none;  /* 常用来去除所有超链接的下划线*/
        list-style-type: none;  /* 常用来去除所有列表的默认项目编号*/
        margin: 0 auto;
    }

    /* 4、分组/并集选择器，常用来简化不同标签的相同操作，引用为， */
    h1,h2 {
        font-size: smaller;
    }

    /* 5、元素选择器，比较常用，引用直接使用标签选择器名 */
    a {
        color: #000;    /* 将超链接默认字体颜色更改为黑色*/
    }

    /* 6、后代选择器，可以快速找到嵌套元素，引用为空格 */
    #container .websit em {
        font-size: larger;
        color: cornflowerblue;
    }

    /* 7、子选择器，不选择任意的后代选择器而是选取局部的，但是范围更小，引用为> */
    #container span > p {
        font-family: 'Courier New', Courier, monospace;
        color: aquamarine;
    }

    /* 8、相邻兄弟选择器，可选择相邻的子元素，且具有相同的父元素，引用为+ */
    #bro .near + p {
        color: red;
        font-size: larger;
    }

    /* 9、兄弟选择器，可以选择所有兄弟元素，引用为~ */
    #bro .far ~ p {
        color: purple;
        font-weight: lighter;
    }

    /* 10、交集/限定类选择器，引用为. */
    #special span p.one {
        color: dodgerblue;
        font-weight: bolder;
    }

    /* 11、属性选择器，通过找到标签的属性或属性值来设置 */
    #attr span[title] {
        color: mediumslateblue;
    }
    #attr span[name] {
        font-weight: bold;  /* 下行注释会将上一个属性选择器的功能更改*/
        /* color: aqua; */  
    }

    /* 12、伪类选择器，最常用的就是使用悬停，引用为： */
    #diff h5:hover {
        color: red;
    } 
    /* 13、伪元素选择器， */
    #different p:first-child {
        color: blue;
    }
    #different p::after {
        content:"文本";
    }

    </style>

    
</head>
<body>
    <div id="nav">
        <span>变粗体</span>
        <p>我是一个段落</p>
    </div><hr/><br/>

    <div class="importent urgent">
        <span>我是一个盒子</span>
    </div><hr/><br/>

    <div>
        <ol>
            <li>开心</li>
            <li>你开心</li>
            <li>我最开心</li>
        </ol>
    </div><hr/><br/>

    <div>
        <h1>我是大标题</h1>
        <h2>我是小标题</h2>
    </div><hr/><br/>

    <div>
        <a href="http://www.baidu.com">百度</a>
    </div><hr/><br/>

    <div id="container">
        <span class="websit">
            <p>我是子元素选择器效果</p>
            <p>我也想是子元素选择器的效果</p>
            <a href="http://souhu.com"><em>搜狐</em></a>
        </span>
    </div><hr/><br/>

    <div id="bro">
        <span class="near">挨我最近那个是我兄弟</span>
            <p>我才是真正的相邻兄弟选择器</p>
            <p>对，我是假的</p><br/>

        <span class="far">我一家有很多紫色的姐妹</span>
        <p>我是姐姐</p>
        <p>我是二姐</p>
        <p>我是妹妹</p>
        
    </div><hr/><br/>

    <div id="special">
        <span>
            <p class="one">大猪头</p>
            <p class="two">二锅头</p>
        </span>
        <p class="three">三把头</p>
    </div>

    <div id="attr">
        <span title="baidu" name="search">百度</span>
        <span title="guge" name="searcher">谷歌</span>
        <span name="searching">搜狐</span>
    </div>

    <div id="diff">
        <h5>悬停到这试试</h5>
    </div>

    <div id="different">
        <p>段落1&nbsp;&nbsp;&nbsp;</p>
        <p>段落2&nbsp;&nbsp;&nbsp;</p>
        <p>段落3</p>
        <p>段落4</p>
    </div>
</body>
</html>

注：这个CSS样式均在head标签之中，但实际开发过程中，CSS部分代码都是存在一个CSS文件夹下，然后在HTML页面使用外部引用CSS。