CSS学习笔记

标签：color 元素笔记学习 red background border 选择器 CSS

CSS （Cascading Style Sheet）层叠级联样式表

CSS：表现（美化网页）

字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动……

建议HTML和CSS分开写

CSS的优势：

内容和表现分离
网页结构表现统一，可以实现复用
样式十分丰富
建议使用独立HTML的CSS文件
利用SEO，容易被搜索引擎收录！

CSS的导入方式

行内样式、内部样式、外部样式

优先级：就近原则

选择器

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

基本选择器

优先级：id > class > 标签

标签选择器：选择一类标签标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>

    <style>
        /* 标签选择器：会选择到页面上所有的这个标签的元素 */
        h1{
            color: aqua;
            background: green;
            border-radius: 5px;
        }
        p{
            color: blue;
            font-size: 40px;
        }
    </style>
</head>
<body>
    
    <h1>Java</h1>
    <h1>CSS</h1>
    <p>Hello</p>

</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>


    <style>
        /* 类选择器的格式 .class{}
            好处：可以多个标签归类，是同一个class，可以复用
        */
        .one{
            color:yellow;
        }

        .two{
            color: rgb(245, 35, 245);
        }
    </style>
</head>
<body>

    <h1 class="one">标题1</h1>
    <h1 class="two">标题2</h1>
    <h1 class="one">标题3</h1>

    <p class="one">p标签</p>
</body>
</html>

id 选择器：全局唯一 #id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>

    <style>
        /* id选择器：id必须保证全局唯一！
            #id名称{}
            不遵循就近原则，固定的
            ID选择器 > class选择器 > 标签选择器
        */

        #one{
            color: aqua;

        }
        .c_one{
            color: yellow;
        }
        h1{
            color: red;
        }

    </style>
</head>
<body>
    <h1 id="one" class="c_one">标题1</h1>
    <h1 id="two">标题2</h1>
    <h1 class="c_one">标题3</h1>
    <h1>标题4</h1>
    <h1>标题5</h1>
    <h1>标题6</h1>
    
</body>
</html>

高级选择器

层次选择器

后代选择器：在某个元素的后面例：祖爷爷爷爷爸爸自己

/* 后代选择器 */
body p{
    background: green;
}

子代选择器

/* 子选择器 */
body>p{
    background: yellow;
}

相邻兄弟选择器只有一个，相邻（向下）

/* 相邻兄弟选择器：只有一个，相邻（向下） */
.active + p{
    background: red;
}

通用选择器：当前选中元素的向下的所有兄弟元素

/* 通用选择器，当前选中元素的向下的所有兄弟元素 */
.active~p{
    background:violet;
}

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>

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

        /* 选中p1：定位到父元素，选择当前的第一个元素
            选中当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
        */
        p:nth-child(1){
            background: rgb(97, 0, 253);
        }
        /* 选中父元素，下的p元素的第二个，类型 */
        p:nth-of-type(1){
            background: blue;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li><p>p4</p></li>
        <li><p>p5</p></li>
        <li><p>p6</p></li>
    </ul>
    
</body>
</html>

属性选择器（常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: white;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/40px;
        }
        /* 属性名，属性名 = 属性值（正则）
            = 绝对等于
            *= 包含这个元素
            ^= 以这个开头
            $= 以这个结尾
        */
        /* 存在id属性的元素 a[]{} */
        a[id]{
            background: yellow;
        }
        /* id=first的元素 */
        a[id=first]{
            background: violet;
        }
        /* class中有links的元素 */
        a[class*=first]{
            background: rgb(1, 255, 149);
        }
        /* 以https开头的元素 */
        a[href^=https]{
            background: yellowgreen;
        }
        /* 以pdf结尾的元素 */
        a[href$=pdf]{
            background: red;
        }
    </style>
</head>
<body>
    
    <p class="demo">
        <a href="https://www.baidu.com" class="links item first" id="first">1</a>
        <a href="" class="links item active" target="_blank" title="test">2</a>
        <a href="/image/123.png" class="links item">3</a>
        <a href="/image/123.jpg" class="links item">4</a>
        <a href="/image/123.html" class="links item">5</a>
        <a href="abc" class="links item">6</a>
        <a href="/a.pdf" class="links item">7</a>
        <a href="/abc.pdf" class="links item">8</a>
        <a href="adcb.doc" class="links item">9</a>
        <a href="abcd.doc" class="links item last">10</a>
    </p>
</body>
</html>

美化网页元素

美化网页的优势：

有效的传递页面的信息
美化网页，页面漂亮，才能吸引用户
凸显页面的主体
提高用户的体验

span 标签：重点要突出的字，使用 span 标签套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        #one{
            color: yellowgreen;
            font-size: 40px;
        }
    </style>
</head>
<body>
    Hello <span id="one">World</span>
</body>
</html>

字体样式

font-family：字体

font-size：字体大小

font-weight：字体粗细

color：字体颜色

文本样式

颜色

 <style>
     #one{
         color: #4409f8;    <!--RGB-->
         color: red;    <!--单词-->
         color: rgba(red, green, blue, 0.2);    <!--RGBA A 0~1（透明度）-->
     }
</style>

文本对齐方式

<style>
    #one{
        /* center 居中对齐
             left 左对齐
            right 右对齐
        */
        text-align: center;
    }
</style>

首行缩进

<style>
    #one{
        /* em 表示字符
           2em表示缩进两个字符
        */
        text-indent: 2em;
    }
</style>

行高

<style>
    #one{
        /* 
            行高 与 块 的高度一直 内容就可上下居中
        */
        height：300px
        line-height：300px;
    }
</style>

装饰

<style>
    #one{
       /* underline：下划线 */
       text-decoration: underline;
       /* line-through：删除线 */
       text-decoration: line-through;
       /* overline：上划线 */
       text-decoration: overline;
    }
</style>

文本图片水平对齐

<style>
     img,span{
        vertical-align: middle;
    }
</style>

超链接伪类 a、a:hover（常用）

   <style>
        /* 默认的状态 */
        a{
            /* 去除下划线 */
            text-decoration: none;
            color: #000;
        }
        /* 鼠标悬浮的状态 */
        a:hover{
            color: #ff0000;
            font-size: 24px;
        }
        /* 鼠标按住未释放的状态 */
        a:active{
            color: green;
        }
        a:visited{
            color: #ff008a;
        }
        /* text-shadow：阴影颜色 水平偏移 垂直偏移 阴影半径 */
        #price{
            text-shadow: blue 10px 10px 2px;
        }
    </style>

列表

#nav{
    width: 300px;
    background: #a0a0a0;
}
.title{
    font-size: 24px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /* 颜色 图片 图片位置 不平铺 */
    background: red url("../img/r.jpg") 270px 10px no-repeat;
}


/* ul li */
/* list-style:
        none 去掉原点
        circle 空心圆
        decimal 数字
        square 正方向    
*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
   background-image: url("../img/l.jpg");
   background-repeat: no-repeat;
   background-position: 236px 3px;
}
a{
    text-decoration: none;
    color: #000;
    font-size: 18px;
}
a:hover{
    color: greenyellow;
    text-decoration: underline;
}

背景

    <style>
        div{
            width: 500px;
            height: 500px;
            border: 1px solid red;
            /* 默认是全部平铺的 repeat */
            background-image: url("img/a.jpg");
        }
        .div1{
            /* x轴平铺（水平） */
            background-repeat: repeat-x;
        }
        .div2{
            /* y轴平铺（垂直） */
            background-repeat: repeat-y;
        }
        .dvi3{
            /* 不平铺（图片原本的样子） */
            background-repeat: no-repeat;
        }
    </style>

渐变

样式可以在此网址上自行查找：Grabient

盒子模型

计算方式：margin + border + padding + 内容宽度

margin：外边距

magrin：0（上下左右边距为0）
margin：0 auto（上下为0 左右auto）外边距的妙用：居中元素（要求：块元素，块元素要有固定的宽度）
margin: 0 0 0 0（上右下左）

padding：内边距

padding：0（上下左右边距为0）
padding：0 auto（上下为0 左右auto）
padding: 0 0 0 0（上右下左）

border： 1px solid red（粗细样式颜色）边框

边框

边框的粗细、边框的样式、边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #app{
            width: 300px;
            /* border 粗细 样式 颜色 */
            border: 1px solid red;
        }
        h2{
            text-align: center;
            background-color: wheat;
        }
       form{
        background-color: aqua;
       }
        div:nth-of-type(1) input{
            border: 2px solid greenyellow;
        }
        div:nth-of-type(2) input{

            border: 1px dashed green;
        }
        div:nth-of-type(3) input{

        border: 1px dashed red;
        }
    </style>
</head>
<body>

    <div id="app">
        <h2>会员登录</h2>
        <form action="#">
            <div>
                <span>用户名</span>
                <input type="text">
            </div>
            <div>
                <span>密码：</span>
                <input type="text">
            </div>
            <div>
                <span>邮箱：</span>
                <input type="text">
            </div>
        </form>
    </div>
    
</body>
</html>

圆角边框

    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            /* 左上 右上 右下 左下 顺时针方向 */
            border-radius: 100px;
        }
    </style>

盒子阴影

    <style>
        div{
           width: 100px;
           height: 100px;
           border: 5px solid red;
           box-shadow: 10px 10px  100px greenyellow;
        }
    </style>

浮动

display

这个也是一种实现行内元素排列的方式，但是很多情况都是使用float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        display:
            block：块元素
            inline：行内元素
            inline-block：行内块元素（是块元素，但是能内嵌，占一行）
            none：无
    -->
    <style> 
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid greenyellow;

            display: inline-block;
        }
    </style>
</head>
<body>

    <div>div块元素</div>
    <span>span行内元素</span>
</body>
</html>

float

    <style> 
        /* 
        float: 浮动
            left：左浮
            right：右浮
        */
        div{
            float: left;
        }
    </style>

父级边框塌陷的问题

clear

clear：right；右侧不允许有浮动元素

clear：left；左侧不允许有浮动元素

clear：both；两侧不允许有浮动元素

clear：none；

解决方案

增加父级元素的高度（简单，元素假设有了固定的高度，就会被限制，所以也不建议使用）

增加一个空的div标签，清除浮动（简单，代码中尽量避免空div）

<div class="clear"></div>
        .clear{
            clear: both;
            margin: 0;
        }

在父级元素中增加一个overflow属性 overflow：hidden（简单，下拉的一些场景避免使用）
```
#father{
    overflow: hidden;
}
```

display 与 float 的对比

display：方向不可控制
float：浮动起来会脱离标准文档流，要解决父级边框塌陷的问题

定位

相对定位：position：relative

相对于原来的位置，进行指定的偏移，相对定位的话，它任然在标准文档流中，原来的位置会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 24px;
            line-height: 25px;
        }
        #father{
            border:1px solid #666;
            padding: 0;
        }
        #first{
            background-color: yellowgreen;
            border:1px solid #f06b6b;
            /* 相对定位 上 下 左 右 */
            position: relative;
            top: -20px;
            left: 20px;
        }
        #second{
            background-color: red;
            border:1px solid #03ee2e;
        }
        #third{
            background-color: aqua;
            border:1px solid  #3875f8;
            position: relative;
            bottom: 10px;
            right: 20px;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="first">第一个盒子</div>
        <div id="second">第二个盒子</div>
        <div id="third">第三个盒子</div>
    </div>
    
</body>
</html>

绝对定位：position：absolute

定位：基于xxx定位，上下左右

没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，通常会相对于父元素进行偏移
在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

固定定位：fixed

div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: red;
            /* 绝对定位：相对于浏览器 */
            position: absolute;
            right: 0;
            bottom: 0;
        }
div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellowgreen;
            /* 固定定位：fixed */
            position: fixed;
            right: 0;
            bottom: 0;
        }

z-index

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/demo6.css">
</head>
<body>
    <div id="content">
        <ul>
            <li></li>
            <li class="tipText">z-index</li>
            <li class="tipBg"></li>
            <li>时间：2024年8月17日21:53:08</li>
            <li>地点：北京</li>
        </ul>
    </div>
</body>
</html>

CSS

#content{
    width: 300px;
    height: 400px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid red;
}
ul,li{
    list-style: none;
    margin: 0;
    padding: 0;
}
li:nth-child(1){
    width: 300px;
    height: 200px;
    background: yellowgreen;
}
/* 父级元素相对定位 */
#conten ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    top: 180px;
    width: 300px;
    height: 25px;
}
.tipText{
    color: white;
    /* 层级 
    z-index: 999;*/
}
.tipBg{
    background-color: #000;
    /* 网页背景的透明度0~1 */
    opacity: 0.5;
}

标签：color,元素,笔记,学习,red,background,border,选择器,CSS
From： https://blog.csdn.net/m0_58533479/article/details/141220448

CSS （Cascading Style Sheet）层叠级联样式表

建议HTML和CSS分开写

CSS的导入方式

选择器

基本选择器

高级选择器

层次选择器

结构伪类选择器

属性选择器（常用）

美化网页元素

字体样式

文本样式

超链接伪类 a、a:hover（常用）

列表

背景

渐变

盒子模型

margin：外边距

padding：内边距

border： 1px solid red（粗细样式颜色）边框

边框

圆角边框

盒子阴影

浮动

display

float

父级边框塌陷的问题

解决方案

display 与 float 的对比

定位

相对定位：position：relative

绝对定位：position：absolute

固定定位：fixed

z-index

相关文章

赞助商

阅读排行

CSS学习笔记

CSS （Cascading Style Sheet）层叠级联样式表

建议HTML和CSS分开写

CSS的导入方式

选择器

基本选择器

高级选择器

层次选择器

结构 伪类选择器

属性选择器（常用）

美化网页元素

字体样式

文本样式

超链接伪类 a、a:hover（常用）

列表

背景

渐变

盒子模型

margin：外边距

padding：内边距

border： 1px solid red（粗细 样式 颜色）边框

边框

圆角边框

盒子阴影

浮动

display

float

父级边框塌陷的问题

解决方案

display 与 float 的对比

定位

相对定位：position：relative

绝对定位：position：absolute

固定定位：fixed

z-index

相关文章

赞助商

阅读排行

结构伪类选择器

border： 1px solid red（粗细样式颜色）边框