当前位置:首页 > 前端技术 > CSS-选择器和标签

CSS-选择器和标签

2022年08月06日 08:50:55前端技术4

1、标签

  • <strong>代表文字加粗</strong>
  • <em>代码文字倾斜</em>
  • <del>代表文字有删除线</del>
  • <ins>代表文字有下划线</ins>

2、网页字体常用设置

  • font-style:normal;                           经常用于清除字体倾斜
  • font-style: italic;                              字体倾斜
  • list-style: none;                               清除li标签前的小圆点·
  • text-decoration:none;                     清除a标签下划线
  • text-decoration: line-through;       删除线
  • text-indent: 2em;                            首行缩进两字符

3、常用选择器

      基本选择器:id选择器、类选择器、标签选择器、伪类选择器、通配符选择器、

      复合选择器:交集选择器、并集选择器、兄弟选择器(+,~)、后代选择器、子元素选择器、属性选择器、伪元素选择器

4、伪类选择器

  • a:link           未被访问的链接
  • a:visited      被访问过的链接,由于用户隐私问题,所以使用visited伪类只能设置字体颜色color
  • a:hover        鼠标移入时的状态
  • a:active        超链接被点击时的状态
  • input:focus   获取焦点时的状态,只能设置input标签

5、伪元素选择器

    ::before 表示元素最前边的部分,一般before都需要结合content样式一起使用

    ::after 表示元素最前后边的部分

    常用方法:给某个div后面添加一根可以控制长短的竖线或横线

<style type="text/css">
    #box{
	    width: 100px;
	    height: 100px;
        background-color: #FFC0CB;
	    position: relative;
    }
    #box::after{
	    content: "";
	    width: 1px;
	    height: 100px;
	    background-color: black;
	    position: absolute;
	    top: 0;
	    right: 0;
    }
</style>
<div id="box"></div>

6、选择器优先级

当使用不同的选择器,选择同一个元素并且设置相同的样式时,
       这样,样式之间产生了冲突,最终采用哪个选择器定义的样式,由选择器的优先级(权重)来决定
       优先规则:

       !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

       全:!importan > 行内样式 > id选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器> 通配符选择器 = 子选择器 = 兄弟选择器 > 继承 > 浏览器默认属性

当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高 。

权重计算规则:
       行内样式,如: style=””,权值为1,0,0,0。
       ID选择器,如:#content,权值为0,1,0,0。
       类,伪类和属性选择器,如.content  E:link  E[attr],权值为0,0,1,0。
       标签选择器和伪元素选择器,如div p  ::before,权值为0,0,0,1。
       通配符、子选择器、兄弟选择器等的。如*、>、+,权值为0,0,0,0。
       继承的样式没有权值。!important的权重最高

7、标签显示模式(重点!!!)

(1)块级元素:

常见块级元素:<h1>~<h6。、<p>、<div>、<ul>、<ol>、<li>等

特点:每个块级元素通常会独占一行,可以对其设置高度、宽度、对齐方式等,默认宽度是所在容器的100%,可以嵌套行内元素和块级元素;

(2)行内元素:

常见行内元素:<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等

特点:行内元素不独占一行,不可以对其设置高度、宽度、对齐方式等,默认宽度就是它本身内容的宽度,只能容纳文本或其他行内元素(a标签不能嵌套a标签);

(3)行内块元素:

常见块级元素:<img />、<input />、<td> 、<canvas>

特点:和相邻行内元素(行内块)在同一行,但是之间会有空白缝隙,可以对其设置高度、宽度、对齐方式等,默认宽度就是它本身内容的宽度。

8、标签模式转换(重点!!!)

  • display: none   此元素不会被显示
  • display: inline   块级元素转为行内元素
  • display: block   行内元素转为块级元素
  • display: inline-block   行内块元素
  • display: inherit   规定应该从父元素继承display属性的值

9、背景

(1)背景缩放:

background-size: contain    图片按照等比例缩放,缩放后的图片如果填不满盒子会有剩余,图片不会被扭曲变形

background-size: cover       直接放大图片,保证充满盒子

(2)线性渐变:

线性渐变风格登录框:

<style type="text/css">
    button{
	width: 300px;
	height: 40px;
	border: 0;
	border-radius: 20px;
	background: linear-gradient(to right,#a6c1ee,#fbc2eb);
	color: #fff;
	font-size: 18px;
	}
</style>
<button type="button">登录</button>

效果展示:

CSS-选择器和标签 _ JavaClub全栈架构师技术笔记

10、object-fit 属性的用法介绍

  • fill(不保持纵横比缩放图片,使图片完全适应)
  • contain(保持纵横比缩放图片,使图片的长边能完全显示出来)
  • cover(保持纵横比缩放图片,只保证图片的短边能完全显示出来)
  • none(保持图片宽高不变)
  • scale-down(当图片实际宽高小于所设置的图片宽高时,显示效果与none一致;否则,显示效果与contain一致)

11、取消无图片时的默认边框

/* 取消无图片时的默认边框 */
#home_page img[src=""],#home_page img:not([src]){
    opacity:0;
}

作者:小矮马
来源链接:https://blog.csdn.net/qq_40007317/article/details/105421846

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/18240.html

标签: css
分享给朋友:

“CSS-选择器和标签” 的相关文章

css去除html中a标签的默认样式

html中a标签的默认样式实在是太丑,这简直是对前端程序猿的一种蹂躏!!!所以通常情况下需要去除a标签的默认样式。 以下代码是在a标签的不同状态下去除默认的下划线,如果要修改颜色、字体等,在对应位置添加css样式即可。 /*去除a...

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?

本篇文章给大家带来的内容是关于怎么用span css设置div内部分字体颜色,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 用span标签设置div内放一段文字中的部分文字字体颜色方法。 一段文字放在DIV内或P内,当我们设置div或p...

css一个标签添加多个class的样式顺序问题

css一个标签添加多个class的样式顺序问题

在使用jquery给div元素添加class时发现一个问题。就是后添加的class中的式样没有覆盖掉原来的class中的式样。 相关css如下: /*div标签原有样式*/ .nav>.navlogin, .navregist {...

CSS将img图片填满父容器div,自适应容器大小

当一个页面中引入多张图片时候,会碰到图片尺寸不一致,单要求显示成一致的大小,我们直接设置图片尺寸会导致图片变形,这就是我们遇到的问题,看下解决方法: <div> <img src="引入的图片地址" alt=""> </div&...

优秀工具推荐:超实用的 CSS 库,样板和框架

优秀工具推荐:超实用的 CSS 库,样板和框架

当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文章中,我编译整理了我最喜欢的 CSS 样板,框架和库,帮助你在建立网站或应用程序时更加高效。   当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文...

CSS:水平居中与垂直居中

CSS:水平居中与垂直居中

CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中。 水平居中 1、行内元素 行内元素(主要是表现为文字,图片等行内元素)...

css中*的用法

*是代表所有html中的标签 例.写了一个 *{box-sizing:border-box} .span-class{ width:80px; padding:20px; } 结果,span标签的内容宽度是80px,并不是40px...

js修改css样式的方法,js如何设置css样式?js修改css样式的方法

js如何设置css样式?本篇文章就给大家介绍js设置(修改)css样式的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 下面我们就给大家介绍使用javascript是如果设置css样式的。 1、直接设置样式(内联样式) 使...

css实现页面底部固定在屏幕最下方,内容占满屏后紧跟其后的两种方法

1.只针对底部高度固定的情况,不能解决底部高度不固定的情况, 原理:主要内容放在page-main里面,page-container最小高度100%(注意这里html,body高度也要设为100%),position为relative。footer的position为abs...

CSS 选取第几个标签元素

在前端开发中,我们可能会碰到这样的需求:想让列表中的第一个部分显示不同的样式 ,想让列表中的偶数部分显示不同的背景颜色,想让列表中的最后一部分样式不一样……这样的需求,我们怎样来实现?其实,如果前面文件是php开发的,可以通过php的循环语句+判断语句+css样式来实现。但是,如...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。