CSS 文本属性、引入方式、CSS选择器

最新推荐文章于 2022-12-06 01:34:50 发布

s_kzn

最新推荐文章于 2022-12-06 01:34:50 发布

阅读量296

点赞数 4

文章标签： css html5 html

本文链接：https://blog.csdn.net/m0_61700036/article/details/120595874

版权

一、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;
}

s_kzn

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS 文本属性、引入方式、CSS选择器

一、属性选择器1.标签选择器概念：是指用指用HTML标签作为选择器，按标签名分类作用：把某一类标签全部选出来，比如<div> 标签<div>width:300px; </div>2.类选择器类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。.dt{background-color:red;}<div class='dt'>北京深圳杭州 &lt
复制链接

扫一扫