CSS 基本了解

最新推荐文章于 2024-07-24 20:42:50 发布

一个渣渣i

最新推荐文章于 2024-07-24 20:42:50 发布

阅读量207

点赞数

分类专栏：前端基础文章标签： css

本文链接：https://blog.csdn.net/qq_45960397/article/details/109688155

版权

前端基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS 笔记

1，css快速入门和三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello css</title>
<!-- 第一种 内部样式  规范，<style>可以编写css的代码，每一个声明，用分号隔开
语法：
    选择器{
    声明1；
    声明2；
    }
     <style>
        h1{
            color: blue;
        }
    </style>
-->
<!--第三种，外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--第二种   行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<!--优先级：覆盖原则，谁最近用谁-->
<h1 style="color: aqua">
    关于CSS
</h1>
</body>
</html>

h1{
    color: blue;
}

2，选择器

2.1，基本选择器

1，标签选择器：会选择到页面上所有这个标签的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--标签选择器，会选择到页面上所有这个标签的元素-->
    <style>
        h1{
            color: brown;
            background: bisque;
            border-radius: 24px;
        }
    </style>
</head>
<body>
<h1 align="center">
    学习java
</h1>
<h1 align="center">
    学习python
</h1>
</body>
</html>

2，类选择器

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

3，id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        id选择器 ：ID必须保证全局唯一
        # id{}
        优先级：id >class >标签选择qi
         */
        #aa{
            color: #168005;
        }
        .xx{
            color: #1f3880;
        }
        .zz{
            color: #80212f;
        }
        h1{
            color: bisque;
        }    </style>
</head>
<body>
<h1 id="aa" align="center">标题1</h1>
<h1 class="xx" align="center">标题2</h1>
<h1 class="zz" align="center">标题3</h1>
<h1 align="center">标题4</h1>
<h1 align="center">标题5</h1>
<p class="xx" align="center">p标签</p>
</body>
</html>

2.2，层次选择器

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

/*后代选择器*/
body p{
    background: #47807e;
}

2，子选择器，一代，儿子

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

3，相邻兄弟选择器

/*  相邻兄弟选择器 ：只有一个起作用 */
    .dc+p{
        background: #807e2c;
    }

4，通用选择器

通用兄弟选则器，当前选中的元素向下的同级元素

.dc~p{
    background: #46806d;
}

2.3，结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: #807e2c;
        }
        ul li:last-child{
            background: #47807e;
        }
       /*选中p1 ：定位到父元素，选择当前第一个元素
       选择当前元素的父级元素，选择父级元素中的第一个,并且是当前元素(这里是p)才有效
        */
        p:nth-child(1){
            background: #7a807c;
        }
        /*选择父元素，下的p元素的第二个类型*/
        p:nth-of-type(2){
            background: #388022;
        }

    </style>
</head>
<body>
<h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>l1</li>
        <li>l2</li>
        <li>l3</li>
    </ul>
</body>
</html>

2.4，属性选择器

id+class结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dome a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: #7c807b;
            text-align: center;
            color: gainsboro;
            margin-right: 5px;
            text-decoration: none;
            font: bold 20px/50px Arial;
        }
        /*= 绝对等于
        *= 包含这个元素
        ^= 以这个开头
        $= 以这个结尾*/
        a[id]{
            background: #ffff1e;
        }
        a[class*= links]{
            background: #4bffee;
        }
        a[href^=http]{
            background: #3d66ff;
        }
    </style>
</head>
<body>
<p class="dome">
    <a href="http://www.baidu.com" class=" item first" id="first">1</a>
    <a href="../../resources/媒体元素.html"target="_blank" title="test">2</a>
    <a href="../resources/媒体元素.html"class="links item first">3</a>
    <a href="../html/图像标签.html"class="links item ">4</a>
    <a href="../html/图像标签.html"class="links item ">5</a>
    <a href="../html/图像标签.html"class="links item ">6</a>
</p>
</body>
</html>

3，美化网页元素

3.1，为什么要美化网页

1，有效的传递页面信息

2，美化网页，看着漂亮，才能吸引用户

3，凸显页面的主题

4，提高用户的体验

span标签，重点要突出的字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #www{
            font-size: 50px;
        }
    </style>
</head>
<body>
你好， 欢迎来到 <span id="www">www</span>网站
</body>
</html>

3.2，字体样式

<!--
   font-family:字体
   font-size: 字体大小
   font-weight:字体粗细

-->
    <style>
        body{
            font-family: 楷体;
        }
        h1{
            font-size: 50px;
        }
        p{
            font-size: 2em;
            font-weight: 600;
            font-size: 20px;
            color: #80212f;
        }

3.3，文本样式

1，颜色 color rgb rgba

2，文本对齐的方式

3，首行缩进

4，行高

5，装饰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本介绍</title>
<!-- 颜色：
          单词
           RGB 0~F
           RGBA  A:0~1
           text-align:排版，居中
           text-indent: 段落首行缩进
           行高 ，line-height 块的高度：height 一致时，就可以上下居中
           line-height: 1.5rem;行间距
           text-decoration: underline;  上中下划线
           text-decoration: line-through;
           text-decoration: overline;
-->
    <style>
        h1{
            color: rgba(0,255,233,0.6);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
            height: 100px;
            line-height: 50px;
            background: #3d66ff;
        }
        .aa{
            text-decoration: underline;
        }
        .ab{
            text-decoration: line-through;
        }
        .ac{
            text-decoration: overline;
        }
        /*<!--a 标签默认有下划线, 用none取消-->*/
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>

<a href="">123</a>
<p class="aa">1209e33</p>
<p class="ab">1209e33</p>
<p class="ac">1209e33</p>
<h1>目录介绍:</h1>
<p>在树形结构目录中，从根目录到任意数据文件都只有一条唯一的通路。 在该路径上，从树的根目录开始，把全部目录文件名与数据文件名依次用“/” 连接起来，即构成该数据文件唯一的路径名。</p>
<p class="p1">当一个文件系统有多级时，每访问一个文件,都要使用从树根开始，直到数据文件为止，是相当麻烦的事，可为每个进程设置一个“当前目录”，又称“工作目录”
</p>
</body>
</html>

3.4，超链接伪类与阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接伪类</title>
    <style>
        /*默认的颜色*/
        a{
            color: #010101;
            text-decoration: none;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: #092b80;
            font-size: 30px;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: #800e60;
        }
        /*text-shadow: 阴影*/
        .price{
            text-shadow: #1940ff 15px 5px 1px;
        }

    </style>
</head>
<body>
<a href="#">
    <img src="../../resources/image/logo.png" alt="">
</a>
<p>
    <a href="#">logo图片</a>
</p>
<p>
    <a href="">作者：股东</a>
</p>
<p class="price">
    ￥1
</p>
</body>
</html>

3.5，列表样式练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="../../resources/媒体元素.html" target="_blank">音箱</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家具</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">服装鞋帽</a>&nbsp;&nbsp;<a href="#">护肤化妆</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅游</a>&nbsp;&nbsp;<a href="">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
    </ul>
</div>
</body>
</html>

#nav{
    width: 300px;
    background: #d0cfbe;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
    background: #ff0707;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 2em;
}
a{
    text-decoration: none;
    font-size: 15px;
    color: #010101;
}
a:hover{
    color: #0a27ff;
    text-decoration: underline;
}

3.6，背景图像应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 500px;
            height: 600px;
            border: 1px solid red;
            margin: 5px;
            background-image: url("../../resources/image/logo.png");
        /*    默认全部平铺*/
        }
        /*平铺x轴*/
        .div1{
            background-repeat: repeat-x;
            opacity: 0.5;
        }
        /*平铺y轴*/
        .div2{
            background-repeat: repeat-y;
        }
        /*只平铺一个*/
        .div3{
            background-repeat: no-repeat;
        }
        /*快捷方式*/
        .div4{
            background: #d0cfbe url("../../resources/image/logo.png") 153px 226px no-repeat;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
</html>

4，盒子模型

4.1，内外边距及div居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="box">
    <h2 class="db">用户登录</h2>
    <form action="index.html" method="post">
    <div>
        <p> <span>账号: </span><input type="text" class="pp" ></p>
        <p> <span>密码: </span><input type="password" class="pp"></p>
        <p><input type="submit" value="登录"></p>
    </div>
    </form>
</div>
</body>
</html>

/*border:粗细，样式，颜色
margin: 0 auto; div 居中
*/
#box{
    width: 300px;
    border: 2px solid #7a807c;
    background: #4bffee;
    margin: 0 auto;
}
/*外边距默认值为8，可设置为0*/
/*body{*/
/*    margin: 0;*/
/*}*/
.db{
    font-size: 20px;
    background: #4cff89;
    text-align: center;
}
div:nth-of-type(1){
    padding: 1px 7px;
}
.pp{
    background: #d0cfbe;
}
/*margin   border   padding*/

4.2，圆角边框和图形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            margin: 30px;
            background: #ff0707;
            border-radius: 50px 50px 50px 50px;
        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>

4.3，display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*block 块元素
        inline 行内元素
        inline-block 是块元素 但是可以内联，在一行
        none 
        */
        div{
            width: 250px;
            height: 250px;
            border: 2px solid red;
            display:inline-block;
        }
        span{
            width: 250px;
            height: 250px;
            border: 2px solid red;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>div</div>
<span>span</span>
</body>
</html>

4.4，三大定位

1，相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            margin: 10px;
            padding: 10px;
            font-size: 12px;
            border: 2px solid red;
            margin: 0 auto;
        }
        a:hover{
            background-color: #0a27ff;
            font-size: 25px;
        }
        /*display: block;转成块元素*/
        a{
            width: 100px;
            height: 100px;
            display: block;
            text-align: center;
            background: #ff8ec5;
            text-decoration: none;
            line-height: 100px;
            color: #010101;
        }
        /*相对定位  position: relative;*/
        #second{
            position: relative;
            left: 100px;
        }
        #third {
            position: relative;
            left: 200px;
            top: -200px;
        }
        #fouth{
            position: relative;
            top:-100px;
        }
        #fifth{
            position: relative;
            left: 200px;
            top: -200px;
        }
    </style>
</head>
<body>
<div class="father">
    <div id="first">
        <a href="../../resources/媒体元素.html">链接1</a></div>
    <div id="second"><a href="#">链接2</a></div>
    <div id="third"><a href="#">链接3</a></div>
    <div id="fouth"><a href="#">链接4</a></div>
    <div id="fifth"><a href="#">链接5</a></div>
</div>
</body>
</html>

2，绝对定位

<!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: 2px solid #ff0af0;
            padding: 0;
            position: relative;
        }
        #first{
            background: #25ff11;
            border: 1px dashed #4cff89;

        }
        /*只有position: absolute;是默认相对浏览器定位
        在其他父级加上 position: relative; 就相当于这个父级元素
        */
        #second{
            background: #ff8ec5;
            border: 1px dashed #4cff89;
            position: absolute;
            right: 20px;
        }
        #third{
            background: #3d66ff;
            border: 1px dashed #4cff89;
        }
    </style>
</head>
<body>
<div class="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

3，固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 2000px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        .father{
            border: 2px solid #ff0af0;
            padding: 0;
            position: relative;
        }
        #first{
            background: #25ff11;
            border: 1px dashed #4cff89;

        }
        /*绝对定位
        */
        #second{
            background: #ff8ec5;
            border: 1px dashed #4cff89;
            position: absolute;
            right: 20px;
        }
        #third{
            background: #3d66ff;
            border: 1px dashed #4cff89;
        }
        /*固定定位position: fixed;
         相对于浏览器*/
        #aa{
            width: 75px;
            height: 20px;
            background: #4cff89;
            position: fixed;
            right: 0;
            bottom: 215px;
            text-decoration: overline;
        }
    </style>
</head>
<body>
<a name="top"></a>
<div class="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
<a href="#top" id="aa">返回顶部</a>
</body>
</html>

透明度和z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="../../resources/image/logo.png" alt=""></li>
        <li class="tipText">logo图片</li>
        <li class="tipbg"></li>
        <li>时间：2999-01-02</li>
        <li>地点：人民公路</li>
    </ul>
</div>
</body>
</html>

#content{
    width: 165px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #4cff89 solid;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
#content ul{
    position: relative;
}
.tipbg,.tipText{
    position: absolute;
    width: 203px;
    height: 25px;
    top: 152px;
}
/*覆盖度z-index 数值越大，层次越高*/
.tipText{
    color: #010101;
    z-index: 0.5;
}
/*透明度，opacity 0~1*/
.tipbg {
    background: #0cfffc;
    opacity: 0.5;
}

一个渣渣i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 基本了解

CSS 笔记1，css快速入门和三种导入方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>hello css</title><!-- 第一种内部样式规范，<style>可以编写css的代码，每一个声明，用分号隔开语法：选择器{ 声明1；声明2； }
复制链接

扫一扫