CSS学习Day01（狂神说Java）

凭谁问，廉颇老矣

已于 2022-04-07 15:03:51 修改

阅读量97

点赞数

文章标签：学习 java intellij-idea

于 2022-03-26 23:05:59 首次发布

本文链接：https://blog.csdn.net/qq_43421528/article/details/123765946

版权

文章目录

CSS学习

CSS学习

1.CSS是什么

1.1 什么是CSS

Cascading Style Sheet 层叠级联样式表
CSS：表现（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动……

1.2 发展史

CSS1.0

CSS2.0 DIV(块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动，定位

CSS3.0 圆角，阴影，动画……浏览器兼容性

1.3 快速入门

style

在这里插入图片描述

css优势：

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

1.4 CSS的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    内部样式-->
    <style>
       h1{
           color: red;
       }
    </style>
<!--    外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级：就近原则-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 >我是标签</h1>
</body>
</html>

拓展：外部样式两种写法

链接式：html

<!--    外部样式-->
    <link rel="stylesheet" href="css/style.css">

导入式:@import是css 2.1特有的

<!--    导入式-->
    <style>
        @import url("css/style.css");
    </style>

2.CSS选择器（重点+难点）

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

2.1 基本选择器

标签选择器:选择一类标签标签{}
类选择器 class：选择所以class属性一致的标签，跨标签 .类名
ID选择器：全局唯一 #id名{}

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

<p>听狂神说</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式.class的名称{}
        好处，可以多个标签归类，是同一个class，可以复用
        */
        .qinjiang{
            color: aquamarine;
        }
        .kuangshen{
            color: blanchedalmond;
        }
    </style>
</head>
<body>
<h1 class="qinjiang">标题1</h1>
<h1 class="kuangshen">标题3</h1>
<h1 class="qinjiang">标题3</h1>
<p class="qinjiang">p标签</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器 ：id必须保证全局唯一
        #id名称{}
        不遵循就近原则，固定的
        id选择器>class选择器>标签选择器
        */
        #qinjiang{
            color: #3cbda6;
        }
        .style{
            color: aqua;
        }
        h1{
            color: red;
        }
    </style>
</head>
<body>
<h1 id="qinjiang"class="style">标题1</h1>
<h1 class="style"> 标题2</h1>
<h1 class="style">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
<h1>标题6</h1>
<h1>标题7</h1>
<h1>标题8</h1>


</body>
</html>

优先级：id>class>标签

2.2 层次选择器

后代选择器：在某个元素的后面

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

子选择器:一代

/*    子选择器*/
        body>p{
            background: #3cbda6;
        }

相邻兄弟选择器:同辈

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

通用选择器

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

2.3 结构伪类选择器

伪类：

/*ul的第一个子元素*/
        ul li:first-child{
            background: crimson;
        }
/*ul的最后一个子元素*/
        ul li:last-child{
            background: blueviolet;
        }
/*    选中p1:定位到父元素，选择当前的第一个元素
    选择当前p元素的父级元素，当前父级元素的第一个，并且是当前元素才生效！顺序
    */
         p:nth-child(2){
             background: #3cbda6;
         }
         /*选中父元素下的p元素的第二个类型*/
         p:nth-of-type(1){
             background: yellow;
         }

在这里插入图片描述

2.4 属性选择器(常用)

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: #3cbda6;
            text-align:center;
            color: orchid;
            text-decoration: none;
            margin-right:5px;
            font:bold 20px/50px Arial;
        }
        /*属性名，属性名=属性值（正则）
        =绝对等于
        *=包含这个元素
        ^=以这个开头
        $=以这个结尾
        */
        /*存在id属性的元素
        a[]{}
        */
        /*id=first的元素*/
        /*a[id=first]{*/
        /*    background: rebeccapurple;*/
        /*}*/
    /*    class中有links的元素*/
    /*    a[class*="links"]{*/
    /*        background:hotpink;*/
    /*    }*/
    /*    选中href中以http开头的元素*/
    /*    a[href^=http]{*/
    /*        background: crimson;*/
    /*    }*/
        a[href$=pdf]{
            background: orchid;
        }
    </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="adcd.doc" class="links item last">10</a>
</p>
</body>
</html>

在这里插入图片描述

3.美化网页（文字，阴影，超链接，列表，渐变…）

3.1 为什么要美化网页

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

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 字体样式

<!--
font-family:字体
font-size：字体大小
font-weight:字体粗细
color：字体颜色
-->
    <style>
        body{
            font-family:"Arial Black",楷体;
            color: #3cbda6;
        }
        h1{
            font-size: 100px;
        }
        .p1{
            font-weight:lighter;
        }

    </style>

3.3 文本样式

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
颜色
单词
RGB 0-F
RGBA 0-1
text-align:排版，居中
text-indent:2em,段落首行缩进
height：
line-height：
行高，和块的高度一致，就可以上下居中
-->
    <style>
        h1{
            color: rgb(0,255,255,0.9);
            text-align: center;
        }
        .p1{
            text-indent:2em;
        }
        .p3{
            background: rebeccapurple;
            height:300px;
            line-height:300px;
        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*上划线*/
        .l3{
            text-decoration: overline;
        }
        /*超链接去下划线*/
        a{
            text-decoration: none;
        }
        /*<!--*/
        /*水平对齐 参照物 a,b*/
        /*-->*/

         img,span{
             vertical-align: middle;
         }

         </style>
</head>
<body>
<a herf="">123</a>

<p class="l1">1231231</p>
<p class="l2">1231231</p>
<p class="l3">1231231</p>


<h1>故事介绍</h1>
<p class="p1">
    3月16日，我省召开2022年硕士研究生招生录取工作视频会。会议主要任务是，贯彻落实教育部2022年全国硕士研究生招生录取工作视频会议精神，部署全省2022年硕士研究生招生复试和录取工作。省教育考试院院长徐峰出席会议并讲话。全省硕士研究生招生单位相关部门负责人，以及省教育厅、省教育考试院相关工作负责人共计四十余人参加了会议。
</p>
<p class="p3">
    徐峰在讲话中充分肯定了前一阶段我省硕士研究生招生考试工作取得的成绩，分析了今年研招录取工作面临的形势，对做好全省2022年研招录取工作提出了明确要求。他强调，一是要紧绷疫情防控之弦，坚决克服麻痹大意思想。二是要严格规范做好复试录取组织工作，稳字当头、稳中求进。要科学制定复试方案、加强复试过程管理、严格考试招生工作纪律、强化试题安全保密、严格规范调剂程序。三是要及时做好信息公开，耐心细致做好考生服务。四是要加强组织领导，层层压实责任。五是要强化突发事件应急处置，确保我省2022年研招录取工作安全、平稳、健康。
</p>
<p>
    <img src="images/1.png" alt="">
    <span>烈罪图鉴</span>
</p>
</body>
</html>

3.4 阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/*     默认的颜色*/
        a{
            text-decoration: none;


        }
        /*鼠标悬浮的颜色(hover)*/
        a:hover{

            color: yellow;
            font-size: 50px;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: green;
        }

        a:visited{
            color: blue;
        }
        /*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
        #price{
            text-shadow:#3cc7f5 10px -10px 2px;
        }
    </style>
</head>
<body>
<a href="#">
    <img src="images/1.png" alt="">
</a>
<p>
    <a href="#">烈罪图鉴</a>

</p>
<p>
    <a href="">作者：老师</a>
</p>
<p id="price">
    $99
</p>
</body>
</html>

在这里插入图片描述

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

3.5 超链接伪类

正常情况下，a，a:hover

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


        }
        /*鼠标悬浮的颜色(hover)*/
        a:hover{

            color: yellow;
            font-size: 50px;
        }

3.6 列表

#nav{
    width:300px;
    width:300px;

}


.title {
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
}
/*ul li*/
/*
list-style:
none 去掉圆心
circle  空心圆
decimal  数字
square  正方形
*/
ul{
    background: darkcyan;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color:#000;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

凭谁问，廉颇老矣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习Day01（狂神说Java）

CSS学习1.CSS是什么1.1 什么是CSSCascading Style Sheet 层叠级联样式表CSS：表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动……1.2 发展史CSS1.0CSS2.0 DIV(块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEOCSS2.1 浮动，定位CSS3.0 圆角，阴影，动画……浏览器兼容性1.3 快速入门stylecss优势：内容和表现分类网页机构表现统一，可以实现复用样式十分的丰富
复制链接

扫一扫