【前端03_CSS】选择器、优先级及计算、文本、背景图、雪碧图、行级/块级/行内块

最新推荐文章于 2021-07-02 19:02:34 发布

Lovely Ruby

最新推荐文章于 2021-07-02 19:02:34 发布

阅读量972

点赞数 2

分类专栏：【前端】笔记 # 基础文章标签：选择器优先级雪碧图行内块文本操作

本文链接：https://blog.csdn.net/u010263423/article/details/97105657

版权

【前端】笔记同时被 2 个专栏收录

61 篇文章 2 订阅

订阅专栏

基础

30 篇文章 0 订阅

订阅专栏

样式 Style 分类

样式分内部样式，行内样式，外部样式

行内样式：写在标签里的Style，例子如下
<div style="width: 200px;height: 200px;background-color: skyblue"></div>
内部样式：写在head中style里的样式

外部样式：写在外部css文件中，用到的时候需要调用

<head>
    <!--内部样式：写在head里的style-->
    <style>
        /*选择器*/
        /*id选择器，唯一，不要以数字开头、不要有中文、不要纯数字*/
        /*找id用井号#*/
        #div1{
            width: 333px;
            background-color: skyblue;
        }
        /*标签选择器，直接写标签名，选中所有标签名的标签*/
        div{

        }
        /*类标签 可以选择多个，标签上写class，用.来写*/
        .male{

        }
    </style>
</head>

CSS 选择器 *

ID选择器：`#`

ID名字要唯一，不要以数字开头、不要有中文、不要纯数字

#div1{
         width: 333px;
         background-color: skyblue;
 }

标签选择器：`tag`

直接写标签名，选中所有标签名的标签

div{
            width: 333px;
            background-color: skyblue;
        }

类选择器：`.`

可以选择多个，标签上写class，用 . 来写

.male{
            width: 333px;
            background-color: skyblue;
        }

并集选择器：`,`

并集用来把相同属性的标签、类、id等并在一起，用 , 相连

#div1,.class1,p{/*逗号是并集*/
            width: 200px;
            height: 200px;
            background-color: skyblue;

交集选择器：`直接连着写`

才算选中它

后代选择器：

后代用空格来表示，父对象 + 空格 + 子对象

div p{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }

通配符选择器：`*`

给全片的样式，通常是去掉页面默认的 margin 和 padding

*{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }

故事：字体授权，用别人的字体要经过授权，一个实习员工去家公司用微软字体，他们的软件很挣钱，但是被微软给告了，因为没有授权（~~感觉有点扯~~ ）

属性选择器

// js：想找到所有的多选框
var checkBox = document.querySelectorAll('input[type=checkbox]')

同级选择器 `+` `~`

#phoneBtn:active + div{
    display: block;
}

伪类 *

鼠标悬浮 `:hover`

伪类目前学到的是做一些互交，比方说鼠标悬浮到某个元素上时，切换样式，用 hover。

/*伪类hover*/
        #div1:active{/*点击*/
            width: 200px;
            height: 200px;
            background-color: hotpink;
        }

        #div1:hover{	/*悬浮时切换样式*/
            width: 200px;
            height: 200px;
            background-color: hotpink;
        }

选择元素

div li:first-child{}
div li:last-child{}
div li:nth-child(1){color: skyblue;} ，这里面 1 可以改成 n、 2n

添加元素 After & Before，购物车小票

After 是在子元素的最后面插入
Before 是在子元素的最前面插入

<head>
    <meta charset="UTF-8">
    <title>after:content</title>
    <style>
        div{
            width: 600px;
            height: 100px;
            background-color: skyblue;

            /**/
            position: relative;
        }
        div:after{
            /*内容必须有，不然after不会显示在div中*/
            content: "";
            display: inline-block;

            /*制作小三角*/
            border-width: 50px;
            border-style: solid;
            border-color: transparent transparent transparent #4995eb;

            /*定位：子绝父相*/
            position: absolute;
            top:0;
            left: 600px;
        }
    </style>
</head>
<body>
    <div></div>
</body>

实现一个小票的样式
在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            height: 120px;
            background-color: pink;
            /*父亲相对*/
            position: relative;
        }
        .box::after{
            /*内容content是关键，不能没有他*/
            content: '';
            width: 50px;
            height: 50px;
            border-radius: 25px;
            background-color: white;

            /*孩子绝对定位*/
            position: absolute;
            top: 35px;
            right: -25px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

下图是我的思路，当然也可以有别的方法

通过top:0px,right:0px定位到右上角
然后向右平移半个直径：使圆心到盒子右边的边缘。
向上平移半个直径，使圆心到盒子的右上角处。
然后向下平移半个盒子的高度即可。

公式总结：top:0-半径+(盒子高度/2)，right:-半径
在这里插入图片描述
然后我发现用弹性盒子的垂直居中也可以，省着算了。但是算数的过程还是要想一想的。

.box{
    width: 300px;
    height: 120px;
    background-color: pink;
    /*父亲相对*/
    display: flex;
    position: relative;
    align-items: center;
}
.box::after{
    /*内容content是关键，不能没有他*/
    content: '';
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: white;

    /*孩子绝对定位*/
    position: absolute;
    /*top: 35px;*/
    right: -25px;
}

修改 a 标签的状态

未改之前的状态修改 a:link{ color: skyblue; }
已点击之后的状态修改 a:visited{ color: pink; }
超链接的下划线 a{ text-decoration: none;/*文字描述，通常是把a标签的下划线去掉*/ }

优先级 & 计算

标签优先级

优先级表降序排列:

!important的地位最大
其次是行级Style
标签名(优先级降序)	第一位	第二位	第三位	第四位
ID	0	1	0	0
Class类	0	0	1	0
标签	0	0	0	1
通配符*	0	0	0	0

行内因为不算标签，所以不计算，但是你要知道，他比 !important 要弱一点
上表的使用方法就是相加，并集的话是看 style 里的顺序，就近原则，最后写的样式会覆盖掉先前的样式
并集不需要优先级的计算
继承的优先级最低，比通配符还要低
display:none 会二次渲染，大型项目的话就要少用

符号优先级

一张表解决在这里插入图片描述

文本

文本有以下方法

文字居中

	#div1{
	            /*文字居中*/
	            line-height: 333px;			/*文字的垂直居中，和height等高*/
	            text-align: center;			/*水平对齐*/
	     }

文字与图片的对齐方式，vertical-align: middle; ：让文字根据图片的中间位置对齐

		img{
            /*图片垂直对齐*/
            vertical-align: middle;
        }

文字间距 letter-spacing: 1px;/*文字的间距*/
文字描述
text-decoration: line-through;
文字中间会划一道线。
边框 border: 2px skyblue solid;
分别是边框粗细，颜色，和边框线样式（顺序不固定）

文字在框里，放不下就用省略号代替

 /*组合三连击 放不下就用省略号*/
  white-space: nowrap;			/*永远不换行*/
  overflow: hidden;				/*超出部分隐藏*/
  text-overflow: ellipsis;		/*省略号*/

效果如下
在这里插入图片描述

模糊距离

值分别是x轴位移，y轴位移，模糊度，阴影颜色
```
text-shadow: 10px 20px 10px skyblue;
```
效果如下

Background 背景

背景图片：用Url来找路径
background-image: url("../../Img/sekiro.png");
背景图片填充是否重复（默认重复）：
background-repeat: no-repeat;/*不重复*/
背景图片大小：
background-size: 100% 100%;这个是相对于父对象的宽高的

抠雪碧图

思路：建立一个 class 类，这个类是个框框，用来框住每个 icon，然后用 Background-position 水平或垂直移动背景图片，通过谷歌浏览器的开发选项来找到合适的位置，然后回到开发软件中更改数值。

1.首先你手上有张雪碧图类似于这样
取经路上
2.建立一个小框框，用来抠图，在 Style 里写一个这样的类给 Body 里的 Div

.icon{
            width: 23px;
            height: 23px;
            /*border: 1px red solid;*/
            background-image: url("../../Img/icon.gif");
        }

3.然后设置 background-position: -4px -2px; 这个背景图片位置来实现抠图，这个位置信息也放在一个类中，然后 body 里的 div 用后代选择器去控制。

<style>
        .icon{
            width: 23px;
            height: 23px;
            /*border: 1px red solid;*/
            background-image: url("../../Img/icon.gif");
        }
        .icon1{
            background-position: -4px -2px;
        }
        .icon2{
            background-position: -31px -2px;
        }
        .icon3{
            background-position: -58px -2px;
        }
        .icon4{
            background-position: -84px -2px;
        }
        /*扣雪碧图，用浏览器和手去调试*/
        /*块级标签和行内块标签可以，因为他们都有宽高*/

    </style>	

	<body>
	    <div class="icon icon1"></div>
	    <div class="icon icon2"></div>
	    <div class="icon icon3"></div>
	    <div class="icon icon4"></div>
	</body>

行级 & 块级 & 行内块标签

行级标签：不会独占一行，不可设置宽高，高度是内容区的高度。

	<a href=""></a>
    <span></span>
    <strong></strong>
    <i></i>     <!--斜体-->
    <br>        <!--br被分在行级-->

块级标签：独占一行，可设置宽高

	<div></div>
    <h1></h1>
    <p></p>

    <ul></ul>
    <ol></ol>
    <li></li>

    <dl></dl>
    <dt></dt>
    <dd></dd>

    <form action=""></form>

    <hr>

    <header></header>       <!--语义化标签之类的-->

行内块标签：不会独占一行

	<img src="" alt="">
    <textarea></textarea>
    <button></button>
    <input>
    <select name="" id=""></select>

table 有自己的分类
互相转换 display，有 inline、block、inline-block

父对象 & 子对象的联系

元素有宽100%，继承它的父元素属性，但是没有高度。

<head>
<meta charset="UTF-8">
<title>属性继承父对象</title>
<style>
    #Son{
        height: 80%;    /*这个百分号是和父对象的百分比*/
        width: 80%;
        background-color: skyblue;
        font-size: 30px;    /*字号*/
        font-weight: bold;  /*字体加粗*/
        font-family: "Agency FB";   /*字体*/
        font-style: italic;/*斜体*/
        opacity: 1;/*透明度，默认是1，ie浏览器不支持*/
    }
    #Father{
        height: 300px;/*这个百分号是和父对象的百分比*/
        width: 300px;
        background-color: hotpink;

    }

    </style>
</head>
<body>
    <div id="Father">
        <div id="Son">
            这是一个测试
        </div>
    </div>
</body>

Lovely Ruby

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端03_CSS】选择器、优先级及计算、文本、背景图、雪碧图、行级/块级/行内块

前端学习总结（3）样式Style分类：样式分内部样式，行内样式行内样式：写在标签里的Style，例子如下<div style="width: 200px;height: 200px;background-color: skyblue"></div>内部样式：写在head中style里的样式<head> <!--内部样式：写在h...
复制链接

扫一扫