【傲霜凌雪丶】CSS笔记

最新推荐文章于 2020-12-22 13:53:23 发布

傲霜凌雪丶

最新推荐文章于 2020-12-22 13:53:23 发布

阅读量120

点赞数 1

本文链接：https://blog.csdn.net/weixin_44120286/article/details/109101097

版权

本文详细介绍了CSS的各种导入方式、优先级规则以及选择器的使用，包括标签选择器、类选择器、ID选择器、层次选择器等。同时，讲解了伪类选择器、属性选择器的应用，并通过实例展示了在实际网页中的应用，如超链接伪类、列表美化、盒子模型、浮动、定位等。此外，还涵盖了圆角、阴影、透明度和Z-index的概念，为网页设计和布局提供了全面的指导。

摘要由CSDN通过智能技术生成

CSS

导入方式

规范在title下面写

<style>
    h1{
        color:red;
    }
</style>

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

```
<h1 style="color:red"></h1>
```
```
@import url(css/style.css)
```

优先级：就近原则

基本选择器

标签选择器
```
h1{
    color:red;
}
```
类选择器
```
.person{
    color:red;
}
```
id选择器唯一
```
#no1{
    color:red;
}
```

层次选择器

后代选择器
```
body p{
    background: red;
}
```
子选择器
```
body>p{
    background: red;
}
```
兄弟选择器只有一个对下
```
.person+p{
    background: red;
}
```
通用选择器所有下面的
```
.person~{
    background: red;
}
```

伪类选择器

/*选择ul的第一个和最后一个子元素*/
ul li:first-child{
    background: red;
}
ul li:last-child{
    background: red;
}
/*选中p1 选中当前p元素的父级 然后选择父级元素的第一个 并且是当前元素类才生效*/
p:nth-child(1){
    backgroud: red;
}
/*选择父元素中的当前元素类的第二个类型*/
p:nth-of-type(2){
    backgroud:red;
}

属性选择器

= 绝对等于

*= 包含这个元素

^= 以这个开头

$=以这个结尾

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

        a[id]{
            background: yellow;
        }
        a[id=no1]{
            background: green;
        }
        a[class*="good"]{
            color: white;
        }
        a[href^=http]{
            color:yellow;
        }
        a[href$=doc]{
            color:green;
        }
    </style>

</head>
<body>
<p class="test">
    <a href="https://www.baidu.com" class="item first" id="no1">1</a>
    <a href="abc.jpg" class="item good">2</a>
    <a href="abc.doc" class="item">3</a>
    <a href="abc.pdf" class="item good">4</a>
    <a href="abc" class="item last" id="no2">5</a>
</p>
</body>
</html>

美化元素

span标签：重点要突出的字

<span id="no1">Java</span>

font-family：修改字体
font-size：字体大小
font-weight：字体粗细
font：字体粗细大小字体样式
color：字体颜色
text-align：排版
text-indent：段落首行缩进（2em）
background：背景色
height：行高
line-height：块高度（当height和line-height相等的时候文字上下居中）
text-decoration：underline下划线line-throught中划线overline上划线none去划线
vertical-align：middle 选择多个作为参照物
text-shadow：阴影
background-image：url();//默认平铺
background-repeat：repeat-x repeat-y水平垂直平铺
background-repeat：no-repeat不平铺
background：linear-gradient(19deg,blue 0%,red 100%)渐变
list-sytle：
1. none 去掉原点
2. circle 空心圆
3. decimal 数字
4. square 正方形

超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            text-decoration: none;
        }
        /*未访问*/
        a:link{
            color: #00FF00;
        }
        /*鼠标悬浮*/
        a:hover{
            color:rgb(0,255,255);
        }
        /*按住的状态*/
        a:active{
            color: rgba(0,0,255,0.5);
        }
        /*已访问*/
        a:visited{
            color: #FF0000;
        }
        /*颜色 水平偏移 垂直偏移 阴影半径*/
        #price{
            text-shadow: black 10px 10px 2px;
        }
    </style>

</head>
<body>
<p>
    <a href="#">码出高效</a>
</p>
<p>
    <a href="#">作者：孤尽</a>
</p>
<p id="price">
    <a href="#">￥99</a>
</p>
</body>
</html>

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/style.css" rel="stylesheet">
</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>

#nav{
    width: 300px;
    background: gray;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    color: black;
}
a:hover{
    color: aqua;
    text-decoration: underline;
}

盒子模型

margin：外边距

padding：内边距

border：边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            border: 1px solid black;
            margin: 0 auto;
        }
        h2{
            font-size: 16px;
            background-color: aqua;
            line-height: 30px;
            margin: 0;
        }
        form{
            background: green;
        }
        input{
            border: 3px solid black;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>会员登陆</h2>
    <form action="#">
        <div>
            <span>账号：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

圆角&阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid;
            border-radius: 10px;
            box-shadow: aqua 0px 0px 100px;
        }
    </style>
</head>
<body>
<div>

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

浮动

块级元素：h1-h6 p div 列表

行内元素：span a img strong…

display：inline-block将行元素变成块

float：left right

clear：both清除浮动

clear：right右侧无浮动

clear：left左侧无浮动

父级元素塌陷：

在浮动后增加一个空div
设置高度
在父级元素中加overflow 侧边栏滚动{scroll hidden}

父类加一个伪类：

#father:after{
    content: '';
    display: both;
    cleat: both;
}

定位

相对定位相对于原来的位置定位

position：relative

绝对定位相对于父级元素位置定位不能超脱父级元素

position：absolute

top left right bottom

固定定位相对于屏幕固定

position：fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: aqua;
            line-height: 100px;
            text-align: center;
            color: black;
            display: block;
        }
        a:hover{
          background: #808080;
        }
        .a2{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a3{
            position: relative;
            left: 100px;
            top: -100px;
        }
        .a4{
            position: relative;
            left: 0px;
            top: -100px;
        }
        .a5{
            position: relative;
            left: 200px;
            top: -200px;
        }
    </style>
</head>
<body>
<div id="box">
    <a href="#" class="a1">链接1</a>
    <a href="#" class="a2">链接2</a>
    <a href="#" class="a3">链接3</a>
    <a href="#" class="a4">链接4</a>
    <a href="#" class="a5">链接5</a>
</div>
</body>
</html>