css入门

1.CSS的三种导入方式

三种导入方式的优先级采取就近原则

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

拓展：外部样式的两种写法

链接式：

 <link rel="stylesheet" href="style.css">

导入式：导入式是css2.1特有的!

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

2.选择器

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

2.1 基本选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    标签选择器:会选择到页面上所有这个标签-->
    <style>
        h1 {
            color: chartreuse;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>
<h1>学java</h1>
<h1>学css</h1>
<p>听狂神说</p>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    类选择器
格式：.class的名称{}
好处，可以多个标签归类，是同一个class，可以复用
-->
    <style>
.yufou {
    color: #e55b86;
}
.kuangsheng {
    color: #b054e5;
}
.luoli{
    color: #5de545;
}
    </style>
</head>
<body>
<h1 class="yufou">标题1</h1>
<h1 class="kuangsheng">标题2</h1>
<h1 class="luoli">标题3</h1>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    id选择器:id必须保证全局唯一！
          #id名称{}
  -->
    <style>
        #yofou{
            color: #e55967;
        }
        .luan{
            color: blueviolet;
        }
    </style>
</head>
<body>
<h1 id="yofou">标题1</h1>
<h1 class="luan">标题2</h1>
<h1 class="luan">标题3</h1>
<h1>标题4</h1>
</body>
</html>

优先级：id选择器>class选择器>标签选择器

2.2 层次选择器

后代选择器：在某个元素的后面祖爷爷爷爷爸爸你
```
body p{     /*后代选择器*/
    background: #b054e5;
}
```

子选择器:一代，儿子

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

相邻兄弟选择器：选择相邻的一个，选下不选上 .类名+标签{}
```
/*相邻兄弟选择器*/
.active+p{
    background: #e55967;
}
```
通用兄弟选择器:选则当前类的下面的所有兄弟元素选下不选上

.active~p{
    background: #e55967;
}

2.3结构伪类选择器

伪类：条件

 /*选择ul列表的第一个子元素*/
   ul li:first-child {
       background: red;
   }
   /*选择ul列表的最后一个子元素*/
   ul li:last-child{
       background: #5de545;
   }

3. 美化网页元素

3.1为什么要美化网页

有限传递页面信息
美化网页,吸引用户
凸显页面主题
提高用户的体验

span标签:重点要突出的字,使用span标签括起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #yufou {
            font-size: 50px;
        }
    </style>

</head>
<body>
欢迎学习<span id="yufou" >java</span>

</body>
</html>

3.2字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    font-family：字体
            font-size：字体大小
             font-weight:字体粗细
               color:颜色-->
    <style>
        body{
            font-family: 楷体,Arial;
            color: #e55967;
        }
        h1{
            font-size: 50px;
        }
        p{
            font-weight: bold;
        }
    </style>
</head>
<body>
<h1>故事介绍</h1>
<p>魁拔是马鞍山仁聚超商贸有限公司核心品牌，2018年在中国商标局注册成立的服装设计品牌。提供测量; 气象信息; 车辆性能检测; 计算机软件设计; 技术研究; 化学分析; 无形资产评估; 包装设计; 室内设计; 服装设计;   [1] </p>
<p>I love you,

    Not for what you are

    ,

    But for what I am

    When I am with you.

    I love you,

    Not only for what

    You have made of yourself,

    But for what

    You are making of me.

    I love you

    For the part of me

    That you bring out;

    I love you

    For putting your hand

    Into my heaped-up heart</p>
</body>
</html>

3.3文本样式

颜色:/颜色rgba rgb模式，a表示透明度取值范围是0~1/
文本对其方式
首行缩进
行高
装饰

text-align: center;<!--居中-->
text-indent: 2em;<!--缩进-->
color: rgba(0,255,255,0.4);<!--颜色rgba   rgb模式，a表示透明度取值范围是0~1-->
height: 300px;<!--块高-->
line-height: 300px;<!-—行高--><!--行高和块高相同时 ，可以实现居中-->
text-decoration: underline <!--下划线-->
text-decoration:line-through<!--中划线-->
text-decoration:overline<!--上划线-->



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*颜色rgba   rgb模式，a表示透明度取值范围是0~1*/
        h1{
            color: rgba(0,255,255,0.4);
            text-align: right;
        }
        .p1{
            text-indent: 2em;
        }
        .p2 {
            background: blue;
            height: 300px;
            line-height: 300px;
        }
        .l1{
            text-decoration: underline;
        }
        .l2{
            text-decoration: line-through;
        }
        .l3{
            text-decoration: overline;
        }
    </style>
</head>
<body>
<h1>总结</h1>
<p class="l1">112233</p>
<p class="l2">112233</p>
<p  class="l3">112233</p>
<p class="p1">白驹、校内执勤等任务，收积极配未下几总结。</p>
<p class="p2">一．作训处
    作训处本年度重要工作情况总结如下：
    2020年9月：
    19级班长集训，迎新、招新，中秋晚会。
    2020年10月：
    19班长集训，招新摆点节目表演，新兵集合分班排，20届退伍军人迎接仪式，第三十届校运会80名红旗手方阵选拔集训，校运会执勤。
    2020年11月:
    新兵队列学习计划，西林附小运动会执勤，招聘大会执勤，
    20级新兵国护考核及国护集训，20级新兵授衔仪式前期准备及部处工作安排，授衔仪式表演方阵选拔与培训，制定新兵集训期作训计划。
    2020年12月：
</p>
<p>制定了2020级军训辅助教官选拔方案，并确定军训辅助教官的名单，并进行助教集训。
    组织队伍参加CS野战大赛，并配合各部处圆满完成了迷彩跨年暨征兵动员大会；军训期间民兵方阵集训；辅导员大赛执勤。
    2021年3月：
    开学期间，组织执勤并对开学入校同学进行帮助；三部九处宣讲会秩序的管理；对20级作训处进行培训，教授制定作训计划，严格要求计划格式、计划内容，教授20级新兵吹集合哨，报告词等一些作训处的基础；20级新兵加入各处后，组织进行19班长与20新兵工作对接；组织进行连队各特色班长轮班制，进行新兵特色教授。
    2021年4月
    国防后备营成立授旗仪式的准备工作。安排校园招聘大会的执勤。配合组织处进行各学院、学生组织的拓展。
    2021年5月：
    送老晚会准备
    盘龙区征兵宣传讲座执勤
    2021年6月：
    环保时装秀执勤，我与连队主题宣讲会，校园十大歌手执勤，荧光夜跑执勤，20级准班长考核
    以上是西南林业大学武装部民兵连作训处2020-2021年年度工作
</p>
</body>
</html>

3.4阴影

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

3.5 超链接伪类

a:hover
 /*伪类  ：鼠标悬浮的颜色*/
        a:hover{
            color: orange;
            font-size: 30px;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: green;
        }

3.6列表

list-style：表格样式

none 去掉圆点

circle 空心圆

decimal 数字

square 正方形

3.7 背景

背景图片‘

  div {
            width: 1000px;
            height: 700px;
            border: 1px  solid red;
            background-image: url("2.jpg");}
            /*默认是铺满的*/
            .div1{
                background-repeat: repeat-x;
                /*水平平铺*/
            }
            .div2{
                background-repeat: repeat-y;
                /*竖直平铺*/
            }
            .div3{
                background-repeat: no-repeat;
                /*原来样子*/
            }

4.盒子模型

margin:外边距

padding：内边距

border：边框

盒子的计算方式：

margin+border+padding+内容宽度

5.浮动

display：inline-block 行内元素块儿元素

float：

5.1 父级边框塌陷问题

clear

clear:right 右侧不允许有浮动

clera:left 左侧不允许有浮动

clear:both 两侧都不允许有浮动

clearn:none

5.2解决方案

增加父级元素的高度（不建议使用）
增加空的div标签，清除浮动

<div  class="clear" ><div>

overflow

在父级元素增加一个overflow:hidden 隐藏
在父类上添加一个伪类
```
#father:after{
    content:"";   内容
    display:block;    把内容变成一个块儿元素
    clear:both;   清除浮动
} 
```
5.3 小结

1.浮动元素增加空div

简单，代码中尽量避免空div

2.设置父元素高度

简单，元素假设有了高度，就会被限制

3.overflow

简单，下来的写场景避免使用

4.父类添加一个伪类：after（推荐使用）

没有副作用，推荐使用！

6.定位

6.1相对定位

相对于原来的位置

position: relative;

相对定位他仍然在标准文档中，他原来的位置会被保留

top:-20px;  向上
right:-20px;   向右
bottom:-20px:   向下
left:-20px;   向左

是指距离边框的位置，所以加-号才可以正向移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<link rel="stylesheet" href="style.css">
<div id="box">
    <a href="#" class="div1">链接1</a>
    <a href="#"class="div2">链接2</a>
    <a href="#"class="div3">链接3</a>
    <a href="#"class="div4">链接4</a>
    <a href="#"class="div5">链接5</a>
</div>
</body>
</html>

#box  {
    height: 300px;
    width: 300px;
    background-color: white;
    border: 1px solid red;
    padding: 20px;
}
a {
    display: block;
    height: 100px;
    width: 100px;
    border:1px solid ;
    background: pink;
    line-height: 100px;
    text-decoration: none;
    text-align: center;
    color: white;
}
a:hover{
    background: blue;
}
.div1{}
.div2{
    position: relative;
    top: -100px;
    right: -200px;
}
.div3{}
.div4{position: relative;
    top: -100px;
    right: -200px;}
.div5 {
    position: relative;
    top: -300px;
    right: -100px;
}

6.2 绝对定位

1.父级元素没有定位的时候，他会相对于浏览器定位

2.父级元素如果有定位的时候，他会相对于父级元素定位

3.在父级元素内移动

相对于父级或者浏览器的位置，进行指定的偏移，绝对定位的话，他不在标准文档中，原来的位置会被保留。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border:1px solid red;
            padding: 0px;
            position: relative;
        }
        #first{
            border:2px solid yellow;
        }
        #second{
                border:3px solid blue;
            position: absolute  ;
            right: 30px;
        }
        #third{
            border:2px solid green;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

6.3固定定位fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        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: yellow;
            position: fixed;
            right: 0;
            bottom: 0;

        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

6.4 z-index定位

z-index 层级默认是0，最高无线

opaitiy:透明度

posted @ 2022-04-03 14:31 与否业务NOW 阅读(81) 评论(0) 收藏举报

刷新页面返回顶部

yufou