css-----选择符-选择器，控制字体和文本

红的花绿的叶

已于 2024-07-16 10:11:35 修改

阅读量353

点赞数

分类专栏：前端基础文章标签： css 前端 html

于 2022-12-19 17:00:45 首次发布

本文链接：https://blog.csdn.net/qq_64227183/article/details/128374116

版权

前端基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

标签选择器

以标签的名称来进行命名的选择符

例如：

p{color:blue;}

该页面中所有的p标签都要符合该样式，颜色蓝色

id选择符

以#作为它的标识，一般用于页面中某个标签具备独有的样式时

注意：

需要给标签添加属性 id="" ，而且id属性不能够以数学开头

class选择器

以 . 作为标识，一般用于页面中某些标签具备相同的样式时进行区分使用

注意：

需要给标签添加属性 class=”“ , 而且class属性不能够以数字开头

* 全选择符

对页面中所有的标签都起作用

四种选择器的优先级：

id选择器>class选择器>全选择器>标签选择器

语法结构：

选择器{属性:属性的值;属性:属性的值}

注意：

属性和属性值的结束用分号来做表示

代码示例：

<head>
	<meta charset="UTF-8">
	<title>Document</title>

    <style type="text/css">

        h1{
           color:red;
        }

        *{
        	color:orange;
        }

        p{
        	color:blue;
        }
        #one{
        	color:gold;
        }

        .pink{
        	color:pink;
        }



    </style>

</head>

控制字体：

设置字号： font-size 单位：px ------ 像素

设置字色： color

设置字行： font-family

设置行高： line-height 单位：可以是百分比，也可以是em 当前字体的倍数

设置字体的粗细： font-weight:normal【正常】bold【加粗】

浏览器默认的字体大小为16px

控制文本：

设置对象中文本缩进： text-indent 单位：em，可以为负值

文本水平对齐方式： text-align left，right，center【中】

对象中空白处理： white-space

normal【自动换行】pre【换行和空白受保护】nowrap【强制在同一行显示】

文本大小写控制： text-transform none【正常大小】uppercase【转换成大写】

capitalize【每个单词的第一个字母转换成大写】lowercase【转换成小写】

元素的垂直对齐方式： vertical-align sub【设置文字为下标】super【设置文字为上标】

top【把元素的顶端与行中最高元素的顶端对齐】

text-botton【把元素的低端与父元素字体的低端对齐】

代码示例：

<style type="text/css">

       h1{
       	font-size: 32px;
       	text-align: center;
       	text-transform: capitalize;
       }

       #one{
       	font-size: 8px;
       	color:#102b6a;
       	text-align: center;
       }
       .two{
       	line-height: 2em;
       	text-indent: 2em;
       }

       .pink{
       	font-family: '宋体';
       }

       #box{
       	  width: 1000px;
       	  height:1000px;
       	  border: 1px solid black;
       	  
       }

       #three{
       	text-align: center;
       	font:;
       }

      




    </style>