Java教程

JavaWEB笔记01 CSS入门+选择器

本文主要是介绍JavaWEB笔记01 CSS入门+选择器，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

JavaWEB笔记01 CSS入门+选择器

文章目录

  • JavaWEB笔记01 CSS入门+选择器
    • 一.标签的分类：
    • 二.纯净的行标签和块标签：
    • 三.CSS介绍：
    • 四.CSS与html结合的方式：
        • 1.内联样式：
        • 2.内部样式：
        • 3.外部样式：
    • 五.选择器：
        • 1.id选择器：
        • 2.class选择器：
        • 3.标签名选择器：
        • 4.其余多种选择器：
            • 1）包含选择器：
            • 2）并列选择器：
            • 3）通配符选择器：
            • 4）伪类选择器：
            • 5）子选择器：
            • 6）相邻选择器：
            • 7）属性选择器：
            • 8）伪元素选择器：
    • 六.选择器优先级问题：

一.标签的分类：

html中的标签分为三类：行标签，块标签，行内块标签

  • 行标签： 行标签的标签宽度不会默认占据一整行的标签，内容有多宽就占多宽，例如：a标签，b标签，font标签
  • 块标签： 块标签的标签宽度会默认会占据一整行的标签，例如：h1到h6标签，ul标签，li标签
  • 行内块标签： 行内块标签的标签宽度不默认占据一行，但是还会具有一些块标签的特性，例如：button按钮标签，img图片标签

二.纯净的行标签和块标签：

在html中，有些标签会默认带有一些样式，那么我们就认为有些标签不纯净，比如：行标签中b会使文本加粗，u会使文本加下划线，块标签中h1会加粗加黑，我们在对于这些非纯净的行标签和块标签进行编辑样式的操作时不容易且不清晰，不如直接使用CSS在最前面统一设置样式。而纯净的块标签指的是标签本身不会对文本有任何样式的作用 ，这样方便我们的编辑和样式的修饰，并通过CSS来控制样式而不是标签，纯净的行标签经常把文本包裹起来 ：

  • 纯净的行标签： span
  • 纯净的块标签： div

三.CSS介绍：

  • CSS的含义：层叠样式表(Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
  • 使用CSS的目的：为了解耦，即有的html带有样式，但是样式又不够丰富，不能满足我们的要求，所以我们CSS有大量的样式属性能够满足我们的要求，也就是说html标签只需要定义网页元素，至于元素长得样子，全交由CSS控制

CSS解耦举例：
font标签中字体的尺寸最大size是7，没办法只通过html将文本放的更大，而使用CSS中的font-size改变字体大小可以没有限制。

四.CSS与html结合的方式：

CSS与html结合的方式主要有以下三种：内联样式，内部样式，外部样式：

1.内联样式：

将CSS代码写在标签的内部，那么样式就会作用到该标签上

#内联举例：
<div style="font-family: 宋体">你好，世界！</div>
  • 内联样式语法：标签中有style属性，使用style语句在标签内部（如上）进行属性修饰：

style=“属性名1：值1；属性名2：值2…；”
注：其中可做选择的属性有：color（文本颜色），font-size（字体大小），font-family（字体）等可供选择

  • 缺点：代码复用性差，书写繁琐，在开发中不常用；

2.内部样式：

将CSS代码单独写在页面内部，通过选择器选择一个或多个标签进行样式的展示和控制；

#内部样式举例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            font-family: 宋体;
            font-size: 50px;
            color: red;
        }
    </style>
</head>
<body>
    <div>Hello,world!</div>
</body>
</html>
  • 内联样式语法：在head标签里面定义一个style标签，在style标签内部使用一个选择器（目的是选择对应的需要编辑其样式的标签），并将需要编辑的属性写在后面大括号中以便控制样式（一个或多个属性）
  • 优点：能提高CSS代码的复用性，即对应的具有一定特征的标签可以在一个大括号中进行样式编辑，这种样式在开发中比较常用；
  • 缺点：一次只能控制一个html页面中的样式；

3.外部样式：

将CSS代码单独写在一个文件中，哪个页面想要用这个样式，就可以引用该样式，一次控制一次或多个页面，复用性更高，开发首选：

#外部举例：
<link rel="stylesheet" type="text/css" href="css/test.css"/>
#使用时需要在该文件路径中创建一个名为css的文件夹
#并在文件夹中新建.css文件：test.css
#在test.css中书写对应的css属性进行控制，例如下面的：
div{
            font-family: 宋体;
            font-size: 50px;
            color: red;
        }
  • 外部样式的语法：
    [1] 将共性部分抽出在文件夹中新建一个.css文件；
    [2] 再使用共性部分的页面中编辑link标签中href=“文件名.css”；
    [3] 文件名.css中的内容即：被控制的部分{属性：值…}
    [4] 不仅是大量代码的共性部分可以使用外部样式，个别个性部分也可以单独写出来，在link标签中同样使用href也可用于引用;
  • 注意：当标签中出现href时，无论是a标签还是link标签都可以表示链接

五.选择器：

针对上面的样式选择中，如果使用内联样式则不需要考虑对应选择器的选用，而对于开发中常选择内部样式和外部样式，选择器是不可避免的，而选择器的选取有利于提高代码复用性等，以下重点介绍三种最常用的选择器以及一些其他的选择器：

1.id选择器：

id选择器经常作为针对某一个特定标签的样式编辑进行的选择，id选择器又称名选择器，即通过名字去选择对应标签：

  • id选择器语法：#id名{属性：值}
  • id选择器一次只能选中一个标签，最常用但是对于共性部分的操作不方便
  • 举例：
#上面的style标签中CSS修饰如下：
#test{
	font-size: 20px;
	color: blue;
}
#对应在下面出现以及被控制的标签如下：
<div id="test">测试</div>
  • 效果：
    在这里插入图片描述

2.class选择器：

class选择器又称为类选择器，即将一些可以算作一类的标签进行统一的样式编辑，在定义标签时需要将标签的类先定义好：

  • class选择器语法：.class名{属性：值}
  • 举例：
#上面的style标签中CSS修饰如下：
.t1{  
	font-size: 30px;
	color: blue;
	}
.t2{   
	font-size: 40px;	
	color: red;
	}
#对应在下面出现以及被控制的标签如下：
	<div class="t1">测试1</div>
    <div class="t1">测试2</div>
    <div class="t2">测试1</div>
    <div class="t2">测试2</div>
  • 效果：
    在这里插入图片描述

3.标签名选择器：

标签名选择器是针对于一系列标签名进行编辑的，即可以一次性选择一个或多个标签（同名/同类型标签），按标签的名称进行选择：

  • 标签名选择器语法： 标签名{属性：值}
  • 举例：
#上面的style标签中CSS修饰如下：
        div{
            font-size: 15px;
            color: black;
        }
        span{
            font-size: 50px;
            color: #4cae4c;
        }
#对应在下面出现以及被控制的标签如下：
    <div>测试1</div>
    <div>测试2</div>
    <span>测试1</span>
    <span>测试2</span>
  • 效果：
    在这里插入图片描述

4.其余多种选择器：

1）包含选择器：

依据标签中的嵌套关系进行层层向内的选择，方向是从外到内，使用空格将标签中的嵌套隔开，如：div ul li a{}，选中标签嵌套中的如下标签：

<div>
	<ul>
		<li>
			<a>

注意可以将选择器结合，在上面的例子中如果有多个div仅想让一个div有效果就可以命名该div的id为d1，使用选择器：#d1 ul li a{}依旧可以进行选择，同样也可以结合类选择器等等

2）并列选择器：

在前面的标签名选择器，id选择器和类选择器的基础上使用逗号隔开需要控制的多个并列级的标签，如：h1,h2,h3{}，选中的标签是：

<h1></h1>
<h2></h2>
<h3></h3>

同样选择器之间可以进行灵活地组合：如：h1,#t2,.tn{}选择的标签有标签h1，id为t2的 标签，属于类tn的标签

3）通配符选择器：

全局通配： 使用通配符星号可以选择所有标签，如：

*{}

会选择所有标签；
局部通配： 使用通配符之间的组合进行局部的通配，在指定标签名之后使用*对于该标签名中的全部标签，即指明一定的范围，如：

div *{}

选中的标签仅div标签下包含的所有标签；

4）伪类选择器：

原先的设计目的是针对a标签（即链接）的四种状态：链接状态，鼠标悬浮状态，鼠标按下状态，链接访问后的状态：
以a标签为例阐述四种伪类选择器：

  • 链接状态：a:link{} 用来控制链接状态的文本更改
  • 鼠标悬浮状态：a:hover{} 用来控制鼠标悬浮状态
  • 鼠标按下状态：a:active{} 用来控制鼠标状态按下状态
  • 链接访问状态：a:visited{} 用来控制访问过后的状态

注意：
[1]链接的页面展示中如果不想出现下划线，在{}中使用：text-decoration:none 进行去下划线；
[2]悬浮和按下对于其他标签都有效果，如div标签，可以使交互界面更加丰富

5）子选择器：

子选择器针对的是标签嵌套，举例：

    <div id="fu">
        <div id="zi"></div>
    </div>

则外层的div标签id为fu，内层的div标签id为zi；

  • 语法：#fu>div{} 就可以对于zi中为div的标签都可以进行选择
  • 注意：
    [1]对于孙类选择：在选择时选两次就可以，如：ol>ul>li
    [2]对于移上父控制子的变化：使用 #fu:hover>div 可以将二者相结合
    [3]子选择器仅仅对于子标签生效，而对于孙子标签不会生效
6）相邻选择器：

相邻选择器是针对两个挨着的标签进行选择和控制，例如：

  • 控制d1下面挨着的使用+进行控制选择，如：#d1+div；
  • 但是相邻选择器只能是紧挨着的选择；而对于隔着一个而不是紧挨着的可以使用两个+进行控制，如：#d1+#d2+div{} ；
  • 再结合伪类选择器表示对于悬浮第一个控制第二个，如：#d1:hover+div{}
7）属性选择器：

对于自带属性的标签，如：
需要控制h1标签中align=“center”，针对携带align属性的标签选择：h1[align]{} 可以选择有align属性的h1标签；[align]{} 可以选择所有标签中含align的标签，h1[align=‘center’] 可以直接选中上面的示例标签；注意属性选择器中有许多针对不同情况的语法

8）伪元素选择器：

伪元素选择器针对的是标签中的文本中的元素进行编辑，如：
选中p标签中首字母：p::first-letter{}
选中id为p的标签中的首行：#p::first-line{}

六.选择器优先级问题：

对于同一个div标签可以通过多种选择器进行对应的选择，如：id选择，class选择，标签名选择进行选择，但是当出现三个控制属性中没有属性重复的部分，那么按理来说会将三种选择器中的效果均呈现出来，但是在实际情况中，当出现冲突的时候会依据优先级进行相应的选择，即按优先级由高到底的顺序进行选择：

  • 选择器常用优先级：内联样式 > id选择器 > class选择器> 标签名选择器
  • 绝对优先：使用 !important 在对应选择器{}中对应属性的值的后面可以超过内联样式，使出现!important的控制部分绝对优先
  • 其他的选择优先级：类选择=伪类选择=属性选择，标签名选择=伪元素选择
  • 注意：对于同优先级的选择器，出现多个时将按照顺序进行覆盖，即后出现的会覆盖原先的
这篇关于JavaWEB笔记01 CSS入门+选择器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航