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

最新推荐文章于 2022-06-09 10:04:11 发布

远独

最新推荐文章于 2022-06-09 10:04:11 发布

阅读量397

点赞数

分类专栏： CSS 文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_53080910/article/details/121834410

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、CSS初了解

写在< head >里

选择器{属性color: 属性值red;属性font-size: 25px} px为像素

符号都要为英文，切记
字母小写

：后加一个空格
选择器和{之间加一个空格

在这里插入图片描述

二、CSS选择器

用来选择标签

1.基础选择器

单个选择器组成
只可更改全部同一类型的标签

（1）标签选择器

<style>
标签名 {
		属性1: 属性值1;
 		属性2: 属性值2; 
 		属性3: 属性值3; 
 		} 
</style>


例
<style>
    p {
        color:blueviolet;
    }
</style>
</head>

<body>
    <p>男生</p>
    <p>哈哈</p>
</body>
</html>

在这里插入图片描述

（2）*`类选择器`

可单独选择一个或者某几个标签

不要用数字或者中文命名，最好使用命名规范来命名

.自己设置  {   
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3;     
}
<p class="自己设置">


例
<style>
    .ziji {
        color:blueviolet;
    }
    .dajia {
        color:crimson;
    }
</style>
</head>

<body>
    <p class="ziji">男生</p>
    <p class="dajia">哈哈</p>
</body>
</html>

在这里插入图片描述

练习

<style>
    .red {
        width: 100px;
        height: 100px;
        background-color: crimson;
    }
    .green {
        width: 100px;
        height: 100px;
        background-color: greenyellow;
    }
</style>
</head>
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
</body>
</html>

在这里插入图片描述

多类名

多类名之间要加空格
可将公共样式写在一个选择器里，在需要的时候采用多类名的形式调用即可

<style>
    .box {
		width: 100px;
        height: 100px;
		}
	.red {
        background-color: crimson;
    }
    .green {
        background-color: greenyellow;
    }
</style>
</head>
<body>
    <div class="red box"></div>
    <div class="green box"></div>
    <div class="red box"></div>
</body>
</html>

效果依旧，后期更好管理
在这里插入图片描述

（3）id选择器

只可被调用一次

#id名 {
			属性1:属性值1; 
			属性2:属性值2; 
			属性3:属性值3;
			 }
<p id="id名"></p>

（4）通配符选择器

不用调用，自动给所有元素（标签）使用样式

* {
		属性1:属性值1; 
		属性2:属性值2; 
		属性3:属性值3; 
	}

2.复合选择器

基础选择器的组合

（1）*`后代选择器`

父级和子级中间有空格
只会改变子级的样式，父级中除去自己的内容不改变
子级可以以此往下书写，如ol li a{

父级 子级{
				属性:属性值;
				属性:属性值;
		}

例
<style>
ol li {
            color: pink;
        }
        
ol li a {
            color: red;
        }

 .nav li a {
            color: yellow;
        }
</style>

	<ol>
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li><a href="#">我是孙子</a></li>
	</ol>
    <ul>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li><a href="#">不会变化的</a></li>
    </ul>
	<ul class="nav">
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
     </ul>

（2）*`子选择器`

只会更改同一元素最近一级的子元素
父级>子级

父级>子级{
				属性:属性值;
				属性:属性值;
		}

例
<style>
        .nav>a {
            color: red;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

在这里插入图片描述

（3）*`并集选择器`

选择多组标签

喜欢竖着写

元素1，元素2{
				属性:属性值;
				属性:属性值;
		}

例
<style>
 /* 要求2: 请把熊大和熊二改为粉色 还有 小猪一家改为粉色 */
        div,
        p,
        .pig li {
            color: pink;
        }

    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

（4）伪类选择器

链接伪类选择器

向某些选择器添加特殊效果

按照link visited hover active的顺序写
链接只能单独指定样式，不可以给body指定，只能给链接a指定

a:link {属性:属性值;} 
		将未访问的链接选出来，设置样式
a:visited {属性:属性值;} 
		  已访问的链接改变样式
a:hover {属性:属性值;}
		 鼠标移动到链接上，改变样式
a:active {属性:属性值;} 
		 鼠标按下没有松开的时候，链接改变样式

：focus伪类选择器

更改有光标的表单的样式

input:focus{
				属性:属性值;
			}

三、CSS字体属性

1. font-family（字体样式）

同一单词，中间有空格的，用引号括起来
各种字体之间用，隔开

各种字体按顺序显示，如果电脑上有第一个字体，就显示第一个字体，如果没有就以此类推，如果都没有，则使用电脑默认的字体

标题标签要单独指定文字大小

<style>
p {
	font-family: Arial,"Microsoft Yahei", "微软雅黑";
  }
一般给
body {
	font-family: Arial,"Microsoft Yahei", "微软雅黑";
	}
这样，body里的所有内容都改好了字体
</style>

2. font-size（字体大小）

px:像素

谷歌浏览器默认16px，但一般要给一个明确的值，不能让浏览器自己默认，因为个浏览器大小不一样，可能会影响页面效果

可以给body制定大小

<style>
p {
	 font-size:20px;
  }
 </style>

3. font-weight（字体粗细）

在这里插入图片描述

一般使用数字，数字后面什么都不带
还可以将标题normal或400，这样标题就不会变粗了
加粗是700

 .ah{
        font-weight: 700;
    }


    <p class="ah">男生</p>

在这里插入图片描述

4. font-style（字体样式）

italic：斜体
normal：正常
可将倾斜的字体不倾斜

 p{
       font-style:italic；
   }

5.*字体复合属性

顺序不可改变
各属性之间空格
size字号和 family字体必须要有

选择器 { font: font-style  font-weight  font-size/line-height  font-family;}

比如
<style>
div{
		font: italic 700 16px "微软雅黑"
	}
</style>

四、*CSS文本属性

1.color（文本颜色）

<style>
div {
	color:red；
	}
</style>

2.text-align（水平对齐文本）

在这里插入图片描述

<style>
div {
		text-align: center;
	 }
</style>

3.text-decoration(装饰文本)

在这里插入图片描述

<style>
div {
		text-decoration:underline;
	 }
</style>

4.text-indent(首行缩进)

em：相对大小，当前元素一个文字的距离

div{
        text-indent: 2em;
    }

5.line-height（行间距）

行高：文本高度默认为设置的高度，浏览器默认16px，设置的行高要比字体高，这高度减去字体高度的部分对半分，分别为上间距和下间距。
如：（26px-16px）/2，上下间距分别为5px

p{
	line-height:26px
  }

五、CSS引入方式

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

理论上可以放在任何部分，但一般放在< head >里

结构和样式没有完全分离

<style>
div {
   	text-decoration:underline;
    }
</style>
</head>

2.行内式(内联样式)

便于更改单个标签
结构和样式没有完全分离

<div style="color: red; font-size: 12px;">嗯</div>

3.*`外部样式表(外链式)`

单独写CSS文件，将CSS文件引入到HTML里面使用
控制多页面

<link rel="stylesheet" href="css文件名">

远独

关注

0
点赞
踩
2

收藏

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

一、CSS初了解写在< head >里选择器{属性color: 属性值red;属性font-size: 25px} px为像素符号都要为英文，切记字母小写：后加一个空格选择器和{之间加一个空格二、CSS选择器用来选择标签1.基础选择器单个选择器组成只可更改全部同一类型的标签（1）标签选择器<style>标签名 { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; } </style&g
复制链接

扫一扫