CSS笔记

最新推荐文章于 2024-08-18 21:36:31 发布

神奇的木偶

最新推荐文章于 2024-08-18 21:36:31 发布

阅读量83

点赞数

文章标签： java 编程语言 css

本文链接：https://blog.csdn.net/weixin_46113888/article/details/118606688

版权

CSS学习笔记

1.什么是CSS

2.选择器

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

2.1 基本选择器

1.基本选择器：选择一类标签
格式：标签{ }

标签选择器

它可以选择一类标签

格式：

标签{
//代码块
}

1.标签选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*标签选择器，会选择到页面上所有的这个标签的元素*/
        h1{
            color: green;
            background: aqua;
            border-radius: 24px;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>

    <h1>学Java</h1>
    <h1>学Java</h1>
    <p>听狂神说</p>

</body>

</html>

类选择器

标签选择器，会选择到页面上所有的这个标签的元素
好处：可以多个标签归类，是同一个class，可以复用

格式：

.类名{
//代码块
}

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

    <style>
    /*标签选择器，会选择到页面上所有的这个标签的元素
    好处：可以多个标签归类，是同一个class，可以复用
    */

    .qingjiang{
        color: red;
    }

    .kuangshen{
            color: blue;
    }
    </style>

</head>
<body>

    <h1 class="qingjiang">标题1</h1>
    <h1 class="kuangshen">标题2</h1cla>
    <h1 class="qinjiang">标题3</h1>

</body>

</html>

id选择器

id必须保证全局统一
优先级：
id选择器 > class选择器 > 标签选择器
id选择器不遵循就近原则

格式：

#id名{
//代码块
}

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

    <style>
    /*id选择器 ：id必须保证全局统一
    格式：
    #id名称{}
    优先级：
    id选择器不遵循就近原则
    id选择器 > class选择器 > 标签选择器
    */
        #qingjiang{
            color: aqua;
        }
        .style1{
            color: greenyellow;
        }
        h1{
            color: blue;
        }
    </style>

</head>
<body>

    <h1 class="style1" id="qingjiang">标题1</h1>
    <h1 class="style1">标题2</h1>
    <h1 class="style1">标题3</h1>
    <h1>标题4</h1>
    <h1>标题5</h1>

</body>

</html>

2.2 层次选择器

后代选择器

在某个元素的后面
如：祖爷爷爷爷爸爸我

/*后代选择器*/
body p{
	backgroup: red;
}

相邻兄弟选择器

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

通用兄弟选择器

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

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*后代选择器*/
            /*body p{*/
            /*    background: red;*/
            /*}*/

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

            /*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
            .active~P{
                background: green;
            }
        </style>
    </head>
    <body>
        <p>p0</p>
        <p class="active">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>

结构伪类选择器

/*ul的第一个子元素*/
ul li:first-child{
    color: red;
    background: green;
}

/*ul的最后一个元素*/
ul li:last-child{
    background: green;
}

/* 选中p1:定位到父元素，选择当前的第一个元素
   选择当前p元素的父级元素，选中父级元素的第一个
*/
p:nth-child(2){
 background: deepskyblue;
}

/*选中父元素下的p元素的第二个类型*/
p:nth-of-type(1){
	background: yellow;
}

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*ul的第一个子元素*/
            ul li:first-child{
                color: red;
                background: green;
            }

            /*ul的最后一个元素*/
            ul li:last-child{
                background: green;
            }

            /* 选中p1:定位到父元素，选择当前的第一个元素
                选择当前p元素的父级元素，选中父级元素的第一个
            */
            p:nth-child(2){
                background: deepskyblue;
            }

            /*选中父元素下的p元素的第二个类型*/
            p:nth-of-type(1){
                background: yellow;
            }

            p:hover{
                background: blue;
            }
        </style>
    </head>
    <body>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <ul>
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
        </ul>
    </body>
</html>

结果如下：
在这里插入图片描述

属性选择器

id + class 结合

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .demo a{
                float: left;
                display: block;
                height: 50px;
                width: 50px;
                border-radius: 10px;
                background: blue;
                text-align: center;
                color: gainsboro;
                text-decoration: none;
                margin-right: 5px;
                font: bold 20px/50px Arial;
            }

            /*
            属性名，属性名 = 属性值（正则）
            = 绝对等于
            *= 包含
            ^= 以什么开头
            $= 以什么结尾
            */

            /*存在id属性的元素   a[]{}*/
            /*a[id]{*/
            /*    background: yellow;*/
            /*}*/

            /*id = first的元素*/
            /*a[id = first]{*/
            /*    background: greenyellow;*/
            /*}*/

            /*class中有links的元素*/
            /*a[class *= links]{*/
            /*    background: yellow;*/
            /*}*/

            /*选中href中以http开头的元素*/
            a[href^=http]{
                background: yellow;
            }

            a[href$= jpg]{
                background: yellow;
            }

        </style>
    </head>
    <body>
        <p class="demo">
            <a href="http://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="images/123.html" class="links item">3</a>
            <a href="images/123.png" class="links item">4</a>
            <a href="images/123.jpg" 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="abc.doc" class="links item">9</a>
            <a href="abcd.doc" class="links item last">10</a>
        </p>
    </body>
</html>

结果
在这里插入图片描述

美化网页元素

3.1 为什么要美化网页

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

span标签

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #title1{
                font-size: 50px;
            }
        </style>
    </head>
    <body>
        欢迎学习<span id="title1">Java</span>
    </body>
</html>

结果如下：
在这里插入图片描述

3.2 字体样式

<style>
	/* font-family:字体样式
   	   font-size:字体大小
   	   font-weight: 字体粗细
  	   color：字体颜色
	*/
	p{
    	font-family: 楷体;
	}
	h1{
    	font-size: 50px;
	}
	.p1{
    	font-weight: 900;
	}
</style>

3.3 文本样式

颜色 color rgb rgba
文本对齐的方式 text-align :center
首行缩进 text-indent:2em
行高 line-height:
装饰 text-decoration：；
文本图片水平对齐：vertical-align：middle；

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*颜色
            单词
            RGB
            RGBA    A：0~1
            */
            h1{
                color: rgba(0,255,255,0);
                text-align: center;
            }
            .p1{
                text-indent: 2em;
            }
            .p3{
                background: blue;
                height: 300px;
                line-height: 300px;
            }
            /*下划线*/
            .l1{
                text-decoration: underline;
            }
            /*中划线*/
            .l2{
                text-decoration: line-through;
            }
            /*上划线*/
            .l3{
                text-decoration: overline;
            }

            /*水平对齐*/
            img, span{
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <p class="l1">1231231</p>
        <p class="l2">1231231</p>
        <p class="l3">1231231</p>
        <h1>人物介绍</h1>
        <p class="p1">
            马云，男，汉族，中共党员，1964年9月10日生于浙江省杭州市，祖籍浙江省嵊州市谷来镇， 阿里巴巴集团主要创始人，现担任日本软银董事、大自然保护协会中国理事会主席兼全球董事会成员、华谊兄弟董事、生命科学突破奖基金会董事、联合国数字合作高级别小组联合主席。
        </p>
        
        <p>
            2013年5月，辞任阿里巴巴集团CEO，继续担任阿里集团董事局主席。6月30日，马云当选全球互联网治理联盟理事会联合主席。2019年9月，马云卸任阿里巴巴董事局主席，继续担任阿里巴巴集团董事会成员。
        </p>

        <p class="p3">
            I don't know the passion until, I met you  I don't know the sorrow until I left you  But now I do know the love when I cherish you
        </p>

        <p>
            <img src="images/a.png" alt="">
            ahfuehfuehfuehua
        </p>
    </body>
</html>

3.4阴影

在这里插入图片描述

/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
    text-shadow: blue 10px -10px 2px;
}

3.5超链接伪类

正常情况下
a, hover

/*默认的颜色*/
a{
    text-decoration: none;
    color: black;
}

/*鼠标悬浮的状态(只需要记住hover)*/
a:hover{
    color: orange;
}

3.6 列表

/*ul li*/
/*
list-style:
    none    去除圆点
    circle  空心圆
    decimal 数字
    square  正方形
*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

ul{
    background: cyan;
}

3.7 背景

4. 盒子模型

4.1 什么是盒子模型

4.2 边框

神奇的木偶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记

CSS学习笔记1.什么是CSS2.选择器作用：选择页面上的某一个或者一类元素2.1 基本选择器1.基本选择器：选择一类标签格式：标签{ }标签选择器它可以选择一类标签格式：标签{//代码块}1.标签选择器.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>
复制链接

扫一扫