韩顺平_php从入门到精通_视频教程_第11讲_初识css_类选择器_id选择器_html选择器_学习笔记_源代码图解_PPT文档整理

最新推荐文章于 2021-03-10 16:45:34 发布

wenximalong

最新推荐文章于 2021-03-10 16:45:34 发布

阅读量3.1k

点赞数

分类专栏： PHP

本文链接：https://blog.csdn.net/wenximalong/article/details/8177472

版权

PHP 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

本文为韩顺平的PHP从入门到精通系列教程的第11讲学习笔记，主要聚焦于CSS中的类选择器、ID选择器以及HTML选择器的使用。通过实例代码和PPT文档，深入理解选择器优先级的问题，提供了详细的源代码图解和demo.html示例。

摘要由CSDN通过智能技术生成

文西马龙：http://blog.csdn.net/wenximalong/

div+css细节

1.初始CSS
2.块元素和行内元素
3.CSS核心内容
3.1标准流
3.2盒子模型
3.3浮动
3.4定位
4.CSS综合案例
4.1盒子模型经典案例
4.2仿sohu首页面布局

学习目标
1.掌握CSS的基本用法
2.掌握CSS的四种选择器用法

CSS使用必要性

css使用的基本语法
选择器{
属性1:属性值;
属性2:属性值;
……
}

demo.html

<html>
	<head>
		<!--css 部分可以单写一个文件，然后引入，也可以直接嵌入到该html文件-->
		<link rel="stylesheet" type="text/css" href="demo.css" />
	</head>
	<body>
		<!--span元素通常用于存放小块内容-->
		<!--要统一为一个样式，只需修改每个span的class，需要新的样式，只需修改demo.css-->
		<span class="s1">栏目一</span><br/>
		<span class="s2">栏目二</span><br/>
		<span class="s3">栏目三</span><br/>
		<span class="s4">栏目四</span><br/>
		<span class="s5">栏目五</span>
	</body>
</html>

demo.css

/*.s1 用术语 类选择器*/
.s1{
	color: green;
	font-size: 30px;
	text-decoration: underline;
}
.s2{
	color: yellow;
	font-size: 12px;
}
.s3{
	color: blue;
	font-style: italic;
}
.s4{
	color: green;
	font-weight: bold;
}
.s5{
	color: #9c3131;
}

案列：把所有的网站的图片，都变成黑白的，这个怎么实现呢
采用滤镜技术？

CSS选择器
选择器是css中非常重要的概念。css中有四种不同的常用选择器
1.类选择器，又叫class选择器
2.id选择器
3.html元素选择器
4.通配符选择器

简单的说，选择器就是在css中创建，而在网页页面（html，jsp，php，asp.net）中使用

类选择器
.类选择器名{
属性名:属性值；
}

id选择器
#id选择器名{
}

html选择器
html元素名称{
属性名:属性值;
}

选择器优先级的问题

selector.html

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="selector.css" />
	</head>
	<body>
		北京你好
		<span class="s1">新闻一</span>
		<span class="s1">新闻二</span>
		<span class="s1">新闻三</span>
		<span class="s1">新闻四</span>
		<span class="s1">新闻五</span><br/>
		<span id="id1">这是一则非常重要的新闻</span>
	</body>
</html>

selector.css

/*类选择器*/
.s1{
	background-color: pink;
	font-weight: bold;
	font-size: 16px;
	color: black;
}

/*id选择器的使用*/
#id1{
	background-color: silver;
	font-size: 40px;
	color: black;
}

/*html选择器*/
body{
	color: orange;
}

韩顺平_php从入门到精通_视频教程_学习笔记_源代码图解_PPT文档整理_目录

wenximalong

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
韩顺平_php从入门到精通_视频教程_第11讲_初识css_类选择器_id选择器_html选择器_学习笔记_源代码图解_PPT文档整理

文西马龙：http://blog.csdn.net/wenximalong/div+css细节1.初始CSS2.块元素和行内元素3.CSS核心内容3.1标准流3.2盒子模型3.3浮动3.4定位4.CSS综合案例4.1盒子模型经典案例4.2仿sohu首页面布局学习目标1.掌握CSS的基本用法2.掌握CSS的四种选择器用法CSS使
复制链接

扫一扫

专栏目录