CSS前端基础

最新推荐文章于 2024-07-19 06:13:09 发布

逆风飞扬fei

最新推荐文章于 2024-07-19 06:13:09 发布

阅读量193

点赞数

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

本文链接：https://blog.csdn.net/weixin_45392405/article/details/116229598

版权

前端基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS前端基础

1.CSS的快速入门
2、选择器
- 2.4、属性选择器
3、美化网页元素

1.CSS的快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    可以编写CSS的代码
        语法：
            选择器：{
                    声明1：
                    声明2：
                    声明3：
            }
-->
    <style>
        h1{
            color:red;
        }
    </style>
</head>
<body>
<h1>主标题</h1>

</body>
</html>

css样式和html文件分开写：
在这里插入图片描述

2、选择器

2.4、属性选择器

=：表示绝对等于
*=：表示包含
^=：表示以某某开头
$=：表示以某某结尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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;
        }

        a[title = test2]{
            background:green;
        }
        /*class中含有links的元素*/

        a[class*=links]{
            background:black;
         }
        /*选中href中以http开头的元素*/
        a[href^=http]{
            background:black;
         }
<!--         以png结尾-->
        a[href$=png]{
            background:red;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item" id="first">1</a>
    <a href="http://blog.kuangstudy.com" class="links item active" target="_blank" title="test2">2</a>
    <a href="images/123.html" class="links item3">3</a>
    <a href="images/123.png" class="links item4">4</a>
    <a href="abc" class="links item6">5</a>
</p>
</body>
</html>

3、美化网页元素

3.1、字体样式

span标签：重点要突出的字使用span标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <style>
        /*  font-family:字体家族
            color：字体颜色
            font-size：字体大小
            font-weight：字体粗细
         */
        body{
            font-family: 隶书;
            color: aquamarine;
        }
        h1{
            font-size: large;
        }
        .links{
            font-weight: bolder;
        }
    </style>
</head>
<body>
<h1>剧情简介</h1>
<h2>编辑</h2>
<p class="links">“很久很久以前流传着一个古老传说，这世上存在着七颗名为龙珠的圆球散落各处，只要集齐七颗龙珠并念出咒文，便可召唤出神龙，无论任何愿望都可替许愿人达成”。</p>
<p>住在深山中的孙悟空本领高强，一次偶然的机会他随天才科学家·布尔玛一起走出大山，开始致力于寻找分散在世界各地的七颗龙珠。在这期间，还结识了好色的龟仙人与乌龙、一看到女人就面红耳赤的雅木茶以及自大的和尚小林等伙伴，不但经历了各种各样的冒险和奇遇，也惹出一连串爆笑的故事。当然，也有许多邪恶的家伙们为了满足私欲而寻找龙珠，为此与悟空等人展开了一连番的激斗。为了实现愿望、突破自我、变得更强，围绕着悟空及他的伙伴们，在大世界的浪漫冒险就这样开始了 ！ [5]</p>
</body>
</html>

3.2 文本样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文本样式</title>
  <style>
    /*
      color: rgba(0,255,255,0.78); 颜色加透明度
      text-align: center; 位置
      text-indent: 2em; 首行缩进
      background: cyan; 背景颜色
      height: 300px; 高度
      line-height: 300px; 行高  单行文字 上下居中
    */
    h1{
      color: rgba(0,255,255,0.78);
      text-align: center;
    }
    .p1{
      text-indent: 2em;
    }
    .p2{
      text-indent: 2em;
    }
    .p3{
      background: cyan;
      height: 300px;
      line-height: 300px;
    }
    /*下划线*/
    .l1{
      text-decoration: underline;
    }
    /*上划线*/
    .l2{
      text-decoration: overline;
    }
    /*中划线*/
    .l3{
      text-decoration: line-through;
    }
    /*水平对齐，参照物*/
    img,span{
      vertical-align: middle;
    }
  </style>
</head>
<body>
<p>
  <img src="images/1.png" alt="" height="100" width="200">
  <span>我的桌面</span>
</p>


<p class="l1">111</p>
<p class="l2">222</p>
<p class="l3">333</p>
<h1>剧情简介</h1>
<h2>编辑</h2>
<p class="p1">“很久很久以前流传着一个古老传说，这世上存在着七颗名为龙珠的圆球散落各处，只要集齐七颗龙珠并念出咒文，便可召唤出神龙，无论任何愿望都可替许愿人达成”。</p>
<p class="p2">住在深山中的孙悟空本领高强，一次偶然的机会他随天才科学家·布尔玛一起走出大山，开始致力于寻找分散在世界各地的七颗龙珠。</p>
<p class="p3">在这期间，还结识了好色的龟仙人与乌龙、一看到女人就面红耳赤的雅木茶以及自大的和尚小林等伙伴，不但经历了各种各样的冒险和奇遇，也惹出一连串爆笑的故事。当然，也有许多邪恶的家伙们为了满足私欲而寻找龙珠，为此与悟空等人展开了一连番的激斗。为了实现愿望、突破自我、变得更强，围绕着悟空及他的伙伴们，在大世界的浪漫冒险就这样开始了 ！</p>
</body>
</html>

3.3、超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接伪类</title>
    <style>
        /*默认的颜色*/
        a{
            text-decoration: none;
            color: black;
        }
        /*鼠标悬浮的颜色*/
        a:hover{
            color: green;
        }
        .Person{

        }
    </style>
</head>
<body>
<a href="http://www.yuedu88.com/sahaladegushi/">
    <img src="images/1.png" alt="" width="306" height="432">
</a>
<p class="Person">
    <a href="https://baike.baidu.com/item/%E4%B8%89%E6%AF%9B/1364178?fr=aladdin">作者：三毛</a>
</p>
<p class="Price">
    <a href="#">￥99元</a>
</p>
</body>
</html>

3.4、列表

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

}
.title{
    font-family: 隶书;
    font-size: 35px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
}

ul li{
    height: 30px;
    list-style: none;
    text-indent: 2em;
    background: gray;

}
a{
    font-size: 15px;
    text-decoration: none;
    color: black;
}
a:hover{
    color: chocolate;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li>
            <a href="#">图书</a>
            <a href="#">音像</a>
            <a href="#">数字商品</a>
        </li>
        <li>
            <a href="#">家用电器</a>
            <a href="#">手机</a>
            <a href="#">数码</a>
        </li>
        <li>
            <a href="#">电脑</a>
            <a href="#">办公</a>
        </li>
        <li>
            <a href="#">家居</a>
            <a href="#">家装</a>
            <a href="#">厨具</a>
        </li>
        <li>
            <a href="#">服饰鞋帽</a>
            <a href="#">个性化妆</a>
        </li>
        <li>
            <a href="#">礼品箱包</a>
            <a href="#">钟表</a>
            <a href="#">珠宝</a>
        </li>
        <li>
            <a href="#">食品饮料</a>
            <a href="#">保健食品</a>
        </li>
        <li>
            <a href="#">彩票</a>
            <a href="#">旅行</a>
            <a href="#">充值</a>
            <a href="#">票务</a>
        </li>
    </ul>
</div>
</body>
</html>

3.5、背景

背景github

  <style>
    /*div相当于一个容器*/
    div{
      width: 1000px;
      height: 700px;
      border: 1px solid red;
      background-image: url("images/1.png");
      /*默认是全部平铺的*/
    }
    .div1{
      background-repeat: no-repeat;
    }
    .div2{
      background-repeat: repeat-x;
    }
    .div3{
      background-repeat: repeat-y;
    }

  </style>

逆风飞扬fei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS前端基础

CSS前端基础1.CSS的快速入门1.CSS的快速入门<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><!-- 可以编写CSS的代码语法：选择器：{ 声明1：声明
复制链接

扫一扫