css第一次笔记

最新推荐文章于 2024-07-20 15:40:46 发布

。疯狂派大星。

最新推荐文章于 2024-07-20 15:40:46 发布

阅读量600

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/zt031026/article/details/122799917

版权

1、样式表

内联样式表
将css样式编写到元素的style属性当中。例如：

<p style="color:red;font-size:40px;"></p>

将样式直接编写到style属性中，这种样式称为内联样式。
内联样式只对当前元素中的内容起作用。
内联样式属于结构与表现耦合，不方便后期维护，不推荐使用。

内部样式表
也可以将css样式编写到head中的style标签里

<style type="text/css"> p{ color:red; font-size:40px; } </style>

外部样式表
将样式表编写到外部的css文件中，然后通过link标签来将外部的css文件引入到当前页面中，
将css样式统一编写到外部的样式表中，完全使结构和表现分离，可以使样式表在不同的页面使用。

<link rel="stylesheet" type="text/css" href="style.css" />

注释：当有多重样式时越精准越优先

2.css选择器

基本选择器

（1）.通用选择器（universal selectors）

	*{
		margin:0;
		padding:0;
	}

（2）.元素选择器

div{
	font-size:60px;
}

（3）.id选择器

#box{
		margin:10px;

	}

（4）.类选择器

类选择器（class sselectors）

一个元素可以有多个类，多个类以空格为分

.box{
	font-size:60px;
}

（5）.分组选择器

#注释：越精确越优先

3.组合选择器

（1）.标记类别选择器

标记类别选择器，也称之为交集选择器。由两个选择器直接构成

第一个必须是标记选择器
第二个可以是类别选择器也可以是ID选择器

这两个选择器之间以.或#连接，中间不能有空格

<style>
    p.one{color:red}	
    p#two{color:blue}	
</style>
<body>
	<p class="one">变红色</p>	
    <p class="two">不变色</p>	
    
    <p id="two">变蓝色</p>	
    <p id="one">不变色</p>	
</body>

2.后代选择器

<style type="text/css">
        /*书写时候中间用空格隔开*/
p span{color: red;}  /*p的后代span里面的字体会变成红色*/
</style>
<body>
<p>唧唧复唧唧，<span>木来当户织,</span>不闻机杼声,但闻女叹息。</p> 
	<!--<span>是<p>的后代 <span>里面的字体变成红色-->
<p class="text">问女何所思，<span>问女何所忆，</span>女亦无所思,女亦无所忆。</p>
<!-- <span>是<p>的后代也是.text的后代 <span>里面的字体变成红色-->
</body>

。疯狂派大星。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css第一次笔记

1、样式表内联样式表将css样式编写到元素的style属性当中。例如：<p style="color:red;font-size:40px;"></p>将样式直接编写到style属性中，这种样式称为内联样式。内联样式只对当前元素中的内容起作用。内联样式属于结构与表现耦合，不方便后期维护，不推荐使用。内部样式表也可以将css样式编写到head中的style标签里<style type="text/css"> p{ color:re...
复制链接

扫一扫