Java教程

属性选择器

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

目录

一、CSS引入方式

1.行内样式表（行内式）

2.内部样式表（嵌入式）

3.外部样式表（链接式）

4.三种方式的比较

二、CSS文本属性

1.文本颜色 

2.对齐文本

3.字体属性

三、属性选择器

1.标签选择器

2.类选择器

3.id选择器

4.通配符选择器

四、关系选择器

1.后代选择器

2.子元素选择器

3.相邻兄弟选择器

一、CSS引入方式

1.行内样式表（行内式）

就是将css样式代码写在具体网页中的一个html标签元素内；行内样式要在特定的HTML标记内使用，使用style属性来设置特定HTML标记的样式。

<div style='color:blue; font-size:17px'> 
</div>

2.内部样式表（嵌入式）

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。

<head>

<style>

p{

color:red;

}

</style>

</head>

3.外部样式表（链接式）

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。

<head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

4.三种方式的比较

样式表优点缺点范围
行内样式表书写方便，权重高没有实现样式和结构相分离一个标签
内部样式表部分结构和样式相分离没有彻底分离一个页面
外部样式表完全实现结构和样式相分离需要引入一个站点

二、CSS文本属性

1.文本颜色 

color 属性用于定义文本的颜色。

div{

color:red;

}
表示方式属性值
预定义的颜色值red,green,blue
十六进制#FF6600，#FF0000
rgb代码rgb(255,0,0)

2.对齐文本

text-align 属性用于设置元素内文本内容的水平对齐方式。

div{

text-align:center;

}
属性值解释
left左对齐
right右对齐
center居中对齐

3.字体属性

Fonts(字体) 属性用于定义字体系列、大小、粗细和文字样式（如斜体）

属性表示注意点
font-size字号通用单位是px像素，一定要跟单位
font-family字体实际工作中按照团队约定来写
font-weight字体粗细加粗 :700或blod，不加粗是normal 或者400，数字不跟单位
font-style字体样式italic ：倾斜 ；normal ：不倾斜
font字体连写连写有顺序，其中字号和字体必须同时出现

三、属性选择器

1.标签选择器

概念 ：是指用指用HTML标签作为选择器，按标签名分类

作用：把某一类标签全部选出来，比如<div> 标签

<div>

width:300px; 

</div>

2.类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用，也可以与其他元素结合使用。

.dt{

background-color:red;

}
<div class='dt'>北京 深圳 杭州 <div>

3.id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

样式#定义，结构 ID 调用，与类选择器相似，但只能调用一次，别的标签不允 许使用 
<div id='gl'>鼓楼</div>
#gl{
 color:orange;
    }

4.通配符选择器

通配符使用星号*表示，意思是“所有的”。

在CSS中，同样使用 * 代表所有的标签或元素，它叫做通配符选择器。

比如：* { color : blue; } 这里就把所有元素的字体设置为蓝色。

*{
margin:0px; 
padding:0px;
}
基础选择器作用特点使用情况用法
标签选择器可以选出所有相同的标签，比如p不能差异化选择较多

p{color:green}

类选择器可以选出一个或多个标签可以根据需求选择非常多.nav{color:green}
id选择器一次只能选择一个标签id属性只能在每个HTML文档中出现一次一般和js搭配#nav{color:green}
通配符选择器选择所有的标签选择的太多，有部分不需要特殊情况使用*{color:green}

四、关系选择器

关系选择器和前面讲的复合选择器类似，但关系选择器可以更精确的控制元素样式。CSS3中的关系选择器主要包括子元素选择器和相邻兄弟选择器，其中子元素择器由符号“>”连接，兄弟选择器由符号“+”和“~”连接。

1.后代选择器

后代选择器可以选择作为某元素后代的元素。( 选择div里的p)

div p{

color:blue;

}

2.子元素选择器

子元素择器主要用来选择某个元素的第一级子元素。

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素

div >h1 {

color:red;

}

3.相邻兄弟选择器

概念：兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。

h5+p {

font-size:15px;

}

这篇关于属性选择器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航