web前端|html教程
CSS那些事儿-阅读随笔1（CSS简介与选择符）
web前端-html教程
最近开始详细钻研CSS有关的知识，参考资料是《CSS那些事儿》。将把在此过程中的收获进行记录，方便以后的学习。
android连连看游戏源码,vscode页面变小快捷键,ubuntu系统核心,集群tomcat是什么,爬虫明星模块,PHP格式刷怎么,seo关键词优化软件s,国技互联 网站模板 下载lzw
A、CSS简介
会议预约管理系统源码,vscode怎样保存,智能小车使用Ubuntu,打开tomcat后,c sqlite 记录复制,jquery 全屏相册插件,前端框架 vue和ag,eclipse爬虫报错,php 数据提交,SEO赚钱平台,模板网站有动态效果,php单网页模板,div css 免费模板,jsp好看的页面源码下载,java企业员工管理系统,电影网站 程序lzw
1.什么是CSS
opengl游戏编程源码,vscode编辑,ubuntu slack,tomcat只能安装在c盘嘛,sqlite变量拼接,网页设计中的立体字,云服务器租借,jquery横向滚动插件,属于前端js框架,网络爬虫工具数据搜集,兄弟连php学费,余杭seo,网站产品分享代码,网页右下角弹出框特效,中餐网站模板,wordpress页面评论,员工管理系统源代码,程序将excel导入sqlserverlzw
CSS全称为Cascading Style Sheet（层叠样式表），是一种不需要编译的标记性语言，用于增强控制网页样式并允许将样式信息与网页内容分离。可以使用如何一种文本编辑器对其进行编辑。
2.CSS的作用
a.修饰页面文本、图片等元素，避免使用不必要的HTML元素。
b.更有效地控制页面结构、页面布局（DIV+CSS）。
c.提高开发和维护效率。
3.CSS的基本结构
selector {property:value;}
例如：p {color:#ff0000;}
选择符（selector）：告诉浏览器，这个样式将用于匹配页面中的哪些对象，包括HTML标签，class，id或者组合使用的选择符。 声明：由property和value组成，主要是告诉浏览器怎么去渲染（修饰）页面中与选择符相匹配的对象。 属性（property）：主要以一个单词的形式出现，并且都是CSS约定的而非自定义的（除个别浏览器私有属性）。 属性值（value）：包括数值和单位，以及一些关键字。其会根据属性而改变形式，属性名过长其带有空格时，一定要将属性值用引号包含，如p {font-family:”sans serif”;}
B、CSS选择符
1.通配选择符
所谓通配选择符，其实只有一个星号（*）而已，通配选择符一般用来对页面所有元素应用样式。例如：
1 * {2margin:0;3padding:0;4color:#ff0000; 5 }/*将页面中所有元素的内外边距都设为0，字的颜色设置为红色*/
2.类型选择符
以HTML元素类型作为选择符。例如：
1 p {2font-size:14px;3text-decoration:underline;4color:#ff0000; 5 }
3.类选择符
类（class）在编程语言中经常使用，实现代码的复用和封装。在页面中，可以将一段CSS代码定义成一个类，并为其取名，这样也能实现CSS在页面中的复用，减少样式的定义。例如一个名为myContent的css类如下所示。（注意，css的类定义时要以.开头）
Hello
css很强大，可以控制页面任何元素的样式dfd
1与世界同步，做一个成功的页面仔
2让我们看看css多么奇妙吧
运行效果下图例：
4.ID选择符
ID选择符与类选择符很像，但是它是以#为前缀的。例如id为myId的选择符：
1 2 3 45
Hello
18
css很强大，可以控制页面任何元素的样式dfd
19
1与世界同步，做一个成功的页面仔
20
2让我们看看css多么奇妙吧
21 22
运行效果图如下：
5.包含选择符
包含选择符也成为后代选择符，作用于某个元素所有的后代（子，孙，重孙…），例如改变p标签内的所有strong标签样式 p strong，两个选择符之前用空格隔开。
1 2 3 45
Hello
16
css很强大，可以控制页面任何元素的样式dfd
17
1与世界同步，做一个成功的页面仔
18
2让我们看看css多么奇妙吧
19 20
运行结果下图例，可以看出，p标签内的两个strong标签中的内容样式都发生了改变：
6.子选择符
子选择符的主要作用是定义某个元素子元素的样式（两个选择符之前用>连接），而无法定义子元素以外的对象（如孙，重孙都不可以），这是与包含选择符不同的地方。将5中的例子进行修改p strong变为p > strong，表示选择p内的strong子元素。
1 2 3 45
Hello
16
css很强大，可以控制页面任何元素的样式dfd
17
1与世界同步，做一个成功的页面仔
18
2让我们看看css多么奇妙吧
19 20
运行结果下图例：
这时只有dfd是p的子元素，而任何元素是p的孙元素，所以只有前者的样式发生了改变。
7.相邻选择符
a.相邻选择符的表示形式与子选择符类似，只是将>换成了+，主要匹配同一父级元素下某个元素之后的元素。如定义与p相邻的strong元素 p + strong。
1 2 3 45
Hello
15
css很强大，可以控制页面任何元素的样式dfd
16
1与世界同步，做一个成功的页面仔
17
2让我们看看css多么奇妙吧
18 3千万不要因为这一点内容就满足了19 20
运行结果如下
如上图所示，p标签内的strong元素的样式并没有改变，只是与p相邻的3千万不要因为这一点内容就满足了样式发生了改变。
b.如果将上述代码中的p + strong 改为 p + strong + strong，且增加strong便签，例如：
1 2 3 45
Hello
16
css很强大，可以控制页面任何元素的样式dfd
17
1与世界同步，做一个成功的页面仔
18
2让我们看看css多么奇妙吧
19 3千万不要因为这一点内容就满足了20 4千万不要因为这一点内容就满足了21 5千万不要因为这一点内容就满足了22 6千万不要因为这一点内容就满足了23 24
则运行结果下图例
c.如果将b中的p + strong + strong 换成 strong + strong，则运行结果如下所示。
8.兄弟选择符（css3引入）
E~F{property:value }，选择E元素后面的所有兄弟元素F。例如选择p后面的所有兄弟元素p
1 2 3 45
Hello
16
css很强大，可以控制页面任何元素的样式dfd
17
1与世界同步，做一个成功的页面仔
18
2让我们看看css多么奇妙吧
19 3千万不要因为这一点内容就满足了20 4千万不要因为这一点内容就满足了21
22
css x
23
24
css+shishihtml
25
ca css d
26 27
运行结果下图例
由于
css x
位于div中，与上面的p元素并不是兄弟关系，所有并没有改变样式。
9.属性选择符
例如p[title|=”css”]，代码如下
1 2 3 45
Hello
16
css很强大，可以控制页面任何元素的样式dfd
17
1与世界同步，做一个成功的页面仔
18
2让我们看看css多么奇妙吧
19
css-x
20
css+shishihtml
21
ca css d
22 23
只有title以css开头，且用-连接的元素样式发生了改变
10.伪类和伪对象
伪类和伪对象是一种特殊的类和对象，它由css自动支持，属css的一种扩展型类和对象，伪类和伪对象的名称不能被用户自定义，使用时只能够按标准格式进行应用。
