CSS 总结01天

最新推荐文章于 2023-08-02 14:47:27 发布

飚车的蚂蚁

最新推荐文章于 2023-08-02 14:47:27 发布

阅读量271

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/zhuyaozong/article/details/50116271

版权

HTML5 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<span style="font-size:24px;">简单的css知识点总结:
1.引用方式
	1).直接在标签中使用
		<body style = "background-color:red">
		</body>

	2).直接在html中使用
		<style type = "text/css">
			body{
				background-color:red;
			}
		</style>

		<body>
		</body>

	3).使用外部的css代码来使用
		<link rel = "stylesheet" href = "styles.css" type = "text/css"/>

		styles.css中的代码
		body{
			background-color:red;
		}

	4).使用外部的css代码来使用2
		<style type = "text/css">
			@import url(styles.css);
		</style>

2.css的使用语法
	1).标签的整合
		h1{
			color:red;
			font-size:35px;
		}

		h1{
			font_size:15px;
			background-color:white;
		}

		结果等同于:(效率没有下面的高)
		h1{
			color:red;
			font-size:15px;
			background-color:white;
		}

	2).选择器共用同一个属性
		p,h1{
			background-color:red;
		}

	3).通配选择器
		*{
			color:red;
		}

3.类选择器
	1).class类选择器(html内部)
		<style type = "text/css">
			textcolor{
				color:red;
			}
		</style>

		<h1 class = "textcolor">这里是h1标签</h1>
		<p class = "textcolor"> 这里是p标签</p>

	2).class类选择器(外部调用)
		<link rel = "stylesheet" href = "styles.css" type = "text/css"/>
		styles.css 代码
		textcolor{
			color:red;
		}

	3).不同标签,同一个类名称的使用
		p.textcolor{
			color:blue;
		}
		h1.textcolor{
			color:black;
		}

		使用同上
		<p>这里是普通的P标签</p>
		<p class = "textcolor"> 这里是有特殊标记的p标签</p>
		<h1>这里是普通的h1标签</h1>
		<h1 class = "textcolor"> 这里是有特殊标记的p标签</h1>

	4).多种选择
		p.import{
			background-color:red;
		}
		p.warning{
			font-size:35px;

		}

		p.import.warning{
			font-size:10px;
		}

		使用状态
		<p class = "import">这里是普通的P标签</p>
		<p class = "warning">这里是普通的P标签</p>
		<p class = "import warning">这里是普通的P标签</p>

4.id选择器
	1).普通使用
		<style type = "text/css">
			#textcolor{
				color:red;
			}
		</style>

		<p id = "textcolor"> 这里是测试id选择器的p标签</p>

	2).修饰特定的标签
		<style type = "text/css">
			#textcolor h1{
				color:red;
			}
		</style>

		<h1 id = "textcolor"> 这里是特定属性的标签h1</h1>


5.需要注意的地方
	1).需要注意的是,尽量保证id和class选择器的名称一致,可能在html中会区分大小写.

	2).在HTML中一个标签只能有一个id，但是可以有多个class。

	3).一个id在一个HTML页面中必须是唯一的，一个class可以被多个标签元素拥有。

	4).id和class 之间的区别
		<1>id选择器只能应用于具体的一个标签(注意不是一种),类选择器却可以应用到多个标签(复用)
    	<2>优先级不同：id选择器大于类选择器。
       
    5).什么时候用id选择器or类选择器
       一般情况下，页面唯一不会复用的可以使用id选择器，比如页头和页脚等。如果需要复用的样式，那么一般使用类选择器，比如表格，列表等。
       一般类选择器使用更多。

6.简单选择器
	1).
		<style type = "text/css">
			[title]{
				color:red;
			}
		</style>

		<h1 title = "hello world"> hello</h1>

	2).对某个标签的属性使用
		<style type = "text/css">
			a[href]{
				color:red;
			}
		</style>

		<a href = "http://www.baidu.com/">baidu</a>

	3).多个属性值放到一块儿使用
		<style type = "text/css">
			a[href][title]{
				color:red;
			}
		</style>

		<a title = "hello" href = "http://www.baidu.com/">baidu</a>

	4).特定值
		<style type = "text/css">
			[title = hello]{
				color:red;
			}
		</style>

		<h1 title = "hello"> 这里是对应的标签</h1>
		<h1 title = "world"> 这里是不对应的标签</h1>

	7).匹配某个字段
		<style type = "text/css">
			[title ~= hello]{
				color:red;
			}
		</style>

		<h1 title = "hello world"> 这里是对应的标签</h1>
		<h1 title = "world hello"> 这里是对应的标签</h1>
		<h1 title = "lo"> 这里是不对应的标签</h1>
		<h1 title = "wld"> 这里是不对应的标签</h1>

	8).匹配某个字段
		<style type = "text/css">
			[title |= lo]{
				color:red;
			}
		</style>

		<h1 title = "hello world"> 这里是对应的标签</h1>
		<h1 title = "world hello"> 这里是对应的标签</h1>
		<h1 title = "lo"> 这里是对应的标签</h1>
		<h1 title = "wld"> 这里是不对应的标签</h1>

		
</span>

飚车的蚂蚁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 总结01天

简单的css知识点总结:1.引用方式 1).直接在标签中使用 2).直接在html中使用 body{ background-color:red; } 3).使用外部的css代码来使用 styles.css中的代码 body{ background-color:red; } 4).使用外部的css代码
复制链接

扫一扫

专栏目录