关于门户网站建设经费的报告,单页网站怎么赚钱,企业网站建设财务规划,网页界面前面我们学习了HTML#xff0c;但是HTML仅仅只是做数据的显示#xff0c;页面的样式比较简陋#xff0c;用户体验度不高#xff0c;所以需要通过CSS来完成对页面的修饰#xff0c;CSS就是页面的装饰者#xff0c;给页面化妆#xff0c;让它更好看。
1 层叠样式表#…前面我们学习了HTML但是HTML仅仅只是做数据的显示页面的样式比较简陋用户体验度不高所以需要通过CSS来完成对页面的修饰CSS就是页面的装饰者给页面化妆让它更好看。
1 层叠样式表CSS
Cascading Style Sheet简称为css中文名称层叠样式表或者级联样式表主要指的是用来装饰HTML页面的一种技术。
css是页面的装饰器能够将一个简陋难看的页面装扮的符合大众的审美观。
1.1 css样式的几种写法
在页面开发的时候一般css有如下几种种写法。 在标签的属性style中编写 在页面中的style标签中编写 在页面外的XX.css文件中编写使用link标签引入 使用import导入需要的css文件
1.1.1 行内样式
行内样式又叫做标签样式主要是写在标签的style属性上好处是优先级别较高坏处是只能渲染一个标签。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title第一个CSS文件/title/headbody!--通过style属性来设置样式这个样式是嵌套在标签中,可以称为内嵌样式内嵌样式仅仅只是对当前标签有效内嵌标签中的元素会把在style中的样式替换掉--h2 stylecolor:#212267;text-decoration:underline;font-size:12px这是我的第一个CSS文件/h2/body
/html
1.1.2 内嵌样式
内嵌样式又叫做页面样式是将 CSS 写在网页源文件的头部即在 head 间通过使用 HTML 标签中的 style标签将其包围其特点是该样式只能在此页使用解决行内样式多次书写的弊端。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title第一个CSS文件/titlestyle typetext/css/*h2表示对页面中的所有的h2的标签都有效*/h2 {background: #aa1222;color: #fff;}/style/headbodyh2这是另一个h2/h2/body
/html 1.1.3 外链接式
链接式通过 HTML 的 link 标签将外部样式表文件链接到 HTML 文档中这也是网络上网站应用最多的方式同时也是最实用的方式。这种方法将 HTML 文档和 CSS 文件完全分离实现结构层和表示层的彻底分离增强网页结构的扩展性和 CSS 样式的可维护性。
首先在页面外部创建一个css文档xxx.css后缀名必须是css在使用link标签引入到需要渲染的页面。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title第一个CSS文件/title!--此时如果在css02中有相应的h2的设置并且和style中的有冲突会被覆盖--link relstylesheet hrefcss02.css /headbodyh2这是另一个h2/h2/body
/html
注意对于样式表而言后定义的会把先定义的样式表覆盖掉。link标签可以放在页面的head中也可以放在body中一般建议放在head中以便于浏览器渲染样式因为样式在加载完成前需要渲染。
1.1.4 import
css也提供了一种在css文件中到导入其他css文件的功能 -- import这样就可以也可以导入css文件。
style/* import 是在css中使用url函数导入其他的css文件是css本身的能力*/import url(index.css);
/style
1.1.5 常见面试题
link和import的区别
首先从本质上说这两种方式都是为了加载css文件但它们还是存在细微的差别。
1、link属于XHTML标签而import完全是css提供的一种方式。link标签除了可以加载css外还可以做很多其他的事情比如定义RSS定义rel连接属性等import只能加载CSS。
2、加载顺序的差别当一个页面被加载的时候link引用的CSS会同时被加载而import引用的CSS会等到页面全部被下载完再加载。所以浏览import加载CSS的页面时可能没有样式网速慢的时候明显可以看到。
3、兼容性的差别由于import是CSS2.1提出的所以老的浏览器不支持import只有在IE5以上的才能识别而link标签无此问题完全兼容。
4、使用dom控制样式时的差别当时用JavaScript控制dom去改变样式的时候只能使用link标签因为import不是dom可以控制的。
1.2 css的选择器
CSS在渲染HTML页面是为了得到HTML中的标签进行样式渲染为我们提供了大量好用的各种选择器以便于我们在CSS中拿到HTML的标签进行样式设置。
一般我们会根据使用的频繁率和定义的标准将css的选择器分为如下几种方便于我们理解和掌握。
1.2.1 基本选择器
基本选择器是使用概率最高也是最常被使用的选择器必须要掌握它。基本选择器包括如下选择器 标签选择器根据标签名称获取 ID选择器获取id为xx的标签 类选择器获取标签中classxxx的标签 通用选择器通配符 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle/* 不建议使用通配符选择器建议使用reset.css* {color: red;}*//* 标签选择器 */div {color: aqua;}/* id选择器 */#myprogram {background: yellow;}/* 类选择器题 */.mylove2 {color: red;}/style/headbodydiv idfirst classmylove 这个是一个div/divp idmyprogram这个是段落标签/pdiv classmylove mylove2这个是一个div/divh1这个是标题/h1hr /div classlistulli这是是一个列表1/lili这是是一个列表2/lili这是是一个列表3/lili这是是一个列表4/lili这是是一个列表5/lili这是是一个列表6/lili这是是一个列表7/lili这是是一个列表8/lili这是是一个列表9/lili这是是一个列表10/li/ulli这是是一个列表8/lili这是是一个列表9/lili这是是一个列表10/li/div/body
/html 运行代码结果如下图 注意标签选择器就是以标签名称为标准选择对应的标签id则是#id属性来选中标签注意一个页面上id必须是唯一的所以id选择器只能选择一个标签类选择器是.class属性选择class属性的值一个页面上允许出现多次所以class选择器更加灵活在开发中一般使用最多通配符选择器不建议使用*匹配所有标签。 id相当于身份证号 class相当于姓名 1.2.2 包含选择器 子代选择器(获取某个标签的第一级子标签) 后代选择器获取某个标签中的所有的子标签 分组选择符也叫做逗号选择器可以同时设定多个标签使用逗号进行分割 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle/* 子代选择器 */div.listul {border: 1px solid red;}/* 后代选择器 */.list li {border: 1px solid red;}/* 逗号选择器 */.mylove, #myprogram, h1 {color: #eee;width: 200px;height: 30px;background: skyblue;}/style/headbodydiv idfirst classmylove 这个是一个div/divp idmyprogram这个是段落标签/pdiv classmylove mylove2这个是一个div/divh1这个是标题/h1hr /div classlistulli这是是一个列表1/lili这是是一个列表2/lili这是是一个列表3/lili这是是一个列表4/lili这是是一个列表5/lili这是是一个列表6/lili这是是一个列表7/lili这是是一个列表8/lili这是是一个列表9/lili这是是一个列表10/li/ulli这是是一个列表8/lili这是是一个列表9/lili这是是一个列表10/li/div/body
/html 运行结果如图 1.2.3 属性选择器 属性是HTML页面标签重要的部分所以css也提供专业使用属性来访问标签的选择器。 !DOCTYPE html
htmlheadmeta charsetUTF-8title属性选择器/titlestyle/* 表示选中的标签中存在某个属性 */.container[class] {color: red;}div[title] {color: #00FFFF;}/* 确切的等于*/input[typetext] {background: red;}/* 属性的值中包含某个值 */input[type*e] {background: red;}/* 以什么开始 */input[type^e] {background: red;}/* 以什么结尾 */input[type$rl] {background: red;}/* 表示下一个标签 */.msg p{border: 1px solid red;}/* 属性名称等于属性值 */[title这个是标题] {color: red;}/style/headbodydiv classcontainer这个是div容器/divdiv title这个是标题这是第二个div/divinput typetext name id value刘建宏 /input typeemail name id valueliushuaige /input typeurl name id value刘欧巴 /hr /div classmsg刘建宏是个大帅哥/divp idmsg2这个是段落/p/body
/html 运行结果如图 可以看出属性选择器还是比较好用的。 1.2.3 伪类选择器 同一个标签根据其不同的种状态有不同的样式。这就叫做“伪类”。伪类用冒号来表示。比如div是属于box类这一点很明确就是属于box类。但是a属于什么类不明确。因为需要看用户点击前是什么状态点击后是什么状态。所以就叫做“伪类”。 所以早期主要用来渲染a标签的不同状态现在随着页面的需求各种标签都开始支持伪类选择器了。 常见的状态主要用如下五种 :link 超链接点击之前
:visited 链接被访问过之后
:hover “悬停”鼠标放到标签上的时候
:active “激活” 鼠标点击标签但是不松手时
:focus 是某个标签获得焦点时的样式比如某个输入框获得焦点 如a标签可以表示不同的状态下的字体颜色 /*让超链接点击之前是红色*/
a:link{color:red;
}
/*让超链接点击之后是橙色*/
a:visited{color:orange;
}
/*鼠标悬停放到标签上的时候*/
a:hover{color:green;
}
/*鼠标点击链接但是不松手的时候*/
a:active{color:black;
} 注意在css中这四种状态必须按照固定的顺序写 a:link 、a:visited 、a:hover 、a:active 如果不按照顺序那么将失效。“爱恨准则”love hate。必须先爱后恨。 css陆续提供了大量的伪类选择器供大家使用如表所示需要大家掌握其中常用的几个。 选择器示例示例说明:checkedinput:checked选择所有选中的表单元素:disabledinput:disabled选择所有禁用的表单元素:emptyp:empty选择所有没有子元素的p元素:enabledinput:enabled选择所有启用的表单元素:first-of-typep:first-of-type选择的每个 p 元素是其父元素的第一个 p 元素:in-rangeinput:in-range选择元素指定范围内的值:invalidinput:invalid选择所有无效的元素:last-childp:last-child选择所有p元素的最后一个子元素:last-of-typep:last-of-type选择每个p元素是其母元素的最后一个p元素:not(selector):not(p)选择所有p以外的元素:nth-child(n)p:nth-child(2|2n-1|odd|even)选择所有 p 元素的父元素的第二个子元素:nth-last-child(n)p:nth-last-child(2)选择所有p元素倒数的第二个子元素:nth-last-of-type(n)p:nth-last-of-type(2)选择所有p元素倒数的第二个为p的子元素:nth-of-type(n)p:nth-of-type(2)选择所有p元素第二个为p的子元素:only-of-typep:only-of-type选择所有仅有一个子元素为p的元素:only-childp:only-child选择所有仅有一个子元素的p元素:optionalinput:optional选择没有required的元素属性:out-of-rangeinput:out-of-range选择指定范围以外的值的元素属性:read-onlyinput:read-only选择只读属性的元素属性:read-writeinput:read-write选择没有只读属性的元素属性:requiredinput:required选择有required属性指定的元素属性:rootroot选择文档的根元素:target#news:target选择当前活动#news元素(点击URL包含锚的名字):validinput:valid选择所有有效值的属性:linka:link选择所有未访问链接:visiteda:visited选择所有访问过的链接:activea:active选择正在活动链接:hovera:hover把鼠标放在链接上的状态:focusinput:focus选择元素输入后具有焦点::first-letterp::first-letter选择每个p 元素的第一个字母::first-linep::first-line选择每个p元素的第一行::first-childp::first-child选择器匹配属于任意元素的第一个子元素的 p 元素::beforep::before在每个p元素之前插入内容:afterp::after在每个p元素之后插入内容::sectionp::section被鼠标选中后的样式:lang(language)p:lang(it)为p元素的lang属性选择一个开始值
1.2.4 伪元素选择器
表是css2和css3提供的伪类选择器在css3中css还提供了伪元素选择器也就是这个选择器可以构建一个伪元素也就是无法提供js等技术访问的的元素但是确实在页面中存在的只能使用css渲染的这样的元素是的css的功能进一步的加强了这两个元素就是before和after但是css2已经定义过了这两个选择器表示之前和之后的选择器所以就存在这样的写法
// CSS3将first-line、first-letter、before、after、section专门归类为伪元素
::before 表示css3的伪元素选择器
::after 标签css3的伪元素选择器
::first-letter
::first-line
::section 注意before和after选择器必须书写content属性。
p::before {display: inline-block;content: s;width: 10px;height: 10px;background: red;border: 1px solid red;border-radius: 50%;
}
p::after
{content: -- liu;
}
代码运行结果如图
