CSS（一）

最新推荐文章于 2020-09-27 15:22:18 发布

itsAurora

最新推荐文章于 2020-09-27 15:22:18 发布

阅读量1k

点赞数

分类专栏： HTML/CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_45716667/article/details/107048625

版权

HTML/CSS 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

引入css的三种方式

行间样式

<div style=""></div>

2.页面级css

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

    </style>

3.外部css文件

<link rel="stylesheet" href="需要连接的css文件名">

选择器

简单选择器
1.id选择器#id名{}

 html部分
<div id="a"></div>

 css部分 
#a{
    background-color: blue;
}

2.class选择器 .class名{}

<!-- html部分 -->
<div class="a"></div>

/* css部分 */
.a{
    background-color: blue;
}

一个div等只能有一个id但可有多个class

html部分
<div class="a b"></div>

css部分
.a{
    background-color: blue;
}
.b{
    color: brown;
}

3.标签选择器标签名{}

html部分
<span>012</span>
    <div>
        <span>123</span>
    </div>


css部分
span{
    color: cadetblue;
}

4.通配符选择器*{}

html部分
 <span>012</span>
    <div>
        <span>123</span>
    </div>

css部分
*{
    background-color: cadetblue;
}

在这里插入图片描述

优先级

!important> 行间样式 > id > class|属性选择器 > 标签选择器 > 通配符

css权重

!important                      Infinity(无穷大)
行间样式                         1000
id                              100
class|属性|伪类                  10
标签|伪元素                      1
通配符                           0


1000/100等为256进制数

判断优先级：并列选择器权重相加，大的优先。

复杂选择器
1.父子选择器/派生选择器

html部分
<div>
	<span>123</span>
</div>


css部分
div span{
    background-color: chartreuse;
}

2.直接子元素选择器

html部分
<div>
        <p>1</p>
        <strong>
            <p>2</p>
        </strong>
    </div>


css部分
div >p{
    color: chartreuse;
}


/*只选择<p>1</p>*/

3.并列选择器

html部分
    <div>1</div>
    <div class="demo">2</div>
    <p class="demo">3</p>

css部分
div.demo{
    color: chocolate;
}


只选择<div class="demo">2</div>

4.并列选择器

html部分
 <p>1</p>
 <h1>2</h1>
 <span>3</span>


css部分
 p{
    font-size: large;
 }
 h1{
    color: coral;
 }
 span{
    font-size: small;
 }
 p,
 h1,
 span{
    background-color: cyan;
 }

css代码

字体
字体大小font-size: xxpx;（改变字体的高度）(默认大小16px)
字体粗细font-weight:lighter/normal/bold/bolder/100~900;
字体样式font-style:normal/italic(斜体);
字体font-family:arial;
字体颜色font-color:;
边框
border: 粗细类型颜色;

html部分
   <div id="a">这是实线边框</div>
   <div id="b">这是点状虚线边框</div>
   <div id="c">这是条状虚线边框</div>


css部分
#a{
    border: 5px solid black;
}
#b{
    border: 2px dotted red;
}
#c{
    border: 2px dashed blue;
}
div{
    width: 200px;
}

在这里插入图片描述

html部分
<div>这是一个圆角边框</div>


css部分
div{
  width: 150px;
  border:5px solid red;
  border-radius: 10px;
}

在这里插入图片描述

输出三角形

html部分
<div></div>


css部分
div{
    width: 0;
    height: 0;
    border: 100px solid transparent;    //transparent   透明色
    border-left-color: red;
}

在这里插入图片描述

颜色

1.英文单词color:red;
2.颜色代码color:#f40;



    r       g       b
    
  00~ff   00~ff   00~ff

#000  黑
#f40  淘宝红

3.颜色函数color:rgb(0~255,0~255,0~255);

itsAurora

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS（一）

引入css的三种方式行间样式<div style=""></div>        2.页面级css<head> <meta charset="UTF-8"> <title>Document</title> <style> </style>   &nbsp
复制链接

扫一扫