前端CSS3知识总结

最新推荐文章于 2024-06-20 20:19:27 发布

朝依飞

最新推荐文章于 2024-06-20 20:19:27 发布

阅读量93

点赞数

文章标签： css

本文链接：https://blog.csdn.net/yushenshili/article/details/113618207

版权

大纲

HTML+CSS+JavaScript
结构+表现+交互

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        h1{
            color: green;
        }

    </style>

    <!--外部样式-->
    <link rel="stylesheet" href="../css/1.css">
</head>
<body>
<!--行内样式，在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我是一个标题</h1>

</body>

2，选择器

作用：选择页面上的某一个或者某一类元素

2.1基本选择器

1，标签选择器

选择一类标签：标签（）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--标签选择器，会选择到页面上所以的这个标签的元素-->
    <style>
        h1{
            color: green;
            background: #000000;
            border-radius:24px; /*圆角边框*/
        }
        p{
            font-size:80px;
            
        }
    </style>
</head>
<body>

<h1>学java</h1>
<h1>学python</h1>
<p>learn english</p>
</body>

2，类选择器class

选择所有class属性一致的标签，跨标签： .类名{}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--类选择器，.class的名称{}
         好处：可以多个标签归类，是同一个class，可以复用-->
    <style>
        .zaozao{
            color: antiquewhite;
        }
        .qinqin{
            color: aqua;
        }
    </style>

</head>
<body>
<h1 class="zaozao">标题1</h1>
<h1 class="qinqin">标题2</h1>
<h1 class="zaozao">标题3</h1>
<p class="zaozao">p标签</p>

</body>

3，id选择器

全局唯一！： #id名{}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--id选择器，id必须保持全局唯一,只能一个使用
         #id名称{}-->
    <style>
        #zaozao{
            color: #1233;
        }

    </style>
</head>
<body>
<h1 id="zaozao">标题1</h1>
<h1 >标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>

优先级：
不遵循就近原则，固定的
id选择器>类选择器>标签选择器

2.1层次选择器

1，后代选择器

在某个元素的后面，全部的东西，祖父，爷爷，爸爸，儿子

<!--后代选择器-->
<style>
    body p{
        background: aqua;
    }
    body  li{
        background: red;
    }
</style>
<body>
<p>你好</p>
<p>
    <li>你好</li>
</p>
<li>hello</li>

2，子选择器

只有一代，儿子

<!--子选择器-->
<style>
    body>p{
        background: black;
    }
    body>li{
        background:rebeccapurple;
    }
</style>
<body>
<p>你好</p>
<p>
    <li>你好</li>
</p>
<li>hello</li>

3，相邻兄弟选择器

同级，同辈（弟弟选择器）

<!--相邻兄弟选择器，只有一个，向下影响-->
<style>
    .brother+p{
        background: red;
    }
</style>
<body>
<p class="brother">你好</p>
<p>p1</p>
<p>
    <li>你好</li>
</p>
<p>p2</p>
<p>p3</p>
<li>hello</li>

4，通用选择器

通用兄弟选择器，当前选中的元素向下的所有兄弟元素皆受影响

<!--通用选择器-->
<style>
    .brother~p{
        background: red;
    }
</style>
<body>
<p class="brother">你好</p>
<p>p1</p>
<p>
    <li>你好</li>
</p>
<p>p2</p>
<p>p3</p>
<li>hello</li>

</body>

结构伪类选择器

伪类：条件的意思
首先避免使用id选择器和class选择器，使代码看起来更加清爽

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--结构伪类选择器-->

    <style>
        /*只渲染ul的第一个子元素*/
        ul li:first-child{
            background: red;
        }
        /* ul的最后一个子元素*/
        ul li:last-child{
            background: rebeccapurple;
        }

    </style>
</head>

<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>

<ul class="borthers">
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>

</ul>
</body>

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--结构伪类选择器-->

    <style>

        /*按照顺序，只选中p1，定位到父元素，选择当前的第一个元素*/
        /*选中当前p元素的父级元素的第一个元素,并且必须是当前元素才生效，意思就是如果父级元素第一个不是p那么就不会有用*/
        /*更改nth-child括号中的数字选择第几个*/
        p:nth-child(1){
            background: green;
        }
        /*按照类型，选中父级元素下的p元素第一个，没有nth-child的必须第一个是p的限制。
        就算第一个不是p，它也会自己找到第一个p*/
        p:nth-of-type(1){
            background: rebeccapurple;
        }

    </style>
</head>

<body>
<h2>p0</h2>
<p>p1</p>
<p>p2</p>
<p>p3</p>

<ul class="borthers">
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>

</ul>
</body>

        /*鼠标放上去可以变色*/
        a:hover{
            background: aqua;
        }


    </style>
</head>

<body>
<a href="">34234234</a>

2.4属性选择器（常用）

属性名：属性名=属性值（正则）
=绝对等于
*=包含这个元素
^=以这个开头
&=以这个结尾

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body a{
            height: 60px;  /*高*/
            width: 60px;   /*宽*/
            background: aqua;  /*背景颜色*/
            float: left;  /*浮动方向*/
            display: block;  /*此元素将显示为块级元素，此元素前后会带有换行符。*/
            border-radius: 10px;   /*添加圆角边框*/
            text-align: center;   /*文本居中*/
            font:bold 20px/50px Arial;    /*粗体 字体大小/行高 字体 */
            text-decoration: none;      /* 去下划线*/
            color: darkmagenta;     /*字体颜色*/
            margin-right: 10px;    /*块级分割距离*/
        }

        /*存在id属性的元素        a[]{}*/
        a[id]{
            background: green;
        }
        a[id=first]{
            background: red;
        }
        /*class中有links的元素,须有双引号，是*=  */
        a[class*="links"]{
            background: antiquewhite;
        }
        /*选中href中以http开头的元素,须有^=*/
        a[href^=https]{
            background: chartreuse;
        }
        a[href$=html]{
            background: brown;

        }
    </style>


</head>
<body>
<a href="https://www.baidu.com" class="links items first" id="first">链接1</a>
<a href="https://www.google.com" class="links active" target="_blank" title="test">链接2</a>
<a href="images/123.html" class="items first">链接3</a>
<a href="images/123.html" class="items first">链接4</a>
<a href="https://www.baidu.com" class="items active">链接5</a>
<a href="https"class="items active">链接6</a>
<a href="123"class="items active">链接7</a>
<a href="123"class="items active">链接8</a>


</body>

待更…

朝依飞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端CSS3知识总结

大纲HTML+CSS+JavaScript结构+表现+交互1.1什么是css?Cascading Style Sheet层叠级联样式表CSS：表现（美化网页）字体，颜色边距，高度，宽度，背景图片，网页定位，网页浮动1.2发展史CSS1.0CSS2.0 DIV(块)+CSS,HTML 与CSS结构分离的思想，网页变得简单，利于搜索引擎优化SEOCSS2.1 浮动，定位CSS3.0 圆角，阴影，动画。。。浏览器兼容性问题1.3快速入门语法：每一个声明最好使用分号结尾选择器{声明1：
复制链接

扫一扫