admin管理员组文章数量:1794759
CSS菜鸟学习笔记1
CSS是用来设置网页中元素的样式。
1、设置元素样式的方式
（1）内联样式。在标签内部通过设置style属性来设置元素样式。（不推荐使用。）
<h1 style="color:yellowgreen;font-size:30px;">前端css演示</h1>（2）内部样式表。将样式编写到head下的style标签中。可以在当前网页对编写的样式复用。
<head> <style> h2{ color: blue; font-size: larger; } </style> </head> <body> <h2>前端css演示</h2> </body>（3）外部样式表。将css样式编写到一个外部的css文件中，通过link标签将外部css文件引入当前页面。将样式编写到外部css文件，可以使用浏览器的缓存机制。（开发中推荐使用）
style.css文件 h2{ color: chartreuse; font-size: small; } html文件 <head> <link rel="stylesheet" href="./style.css"> </head> <body> <h2>前端css演示</h2> </body>2、CSS语法规范
选择器+声明块（多个声明组成，每个声明是样式名与样式值成对的结构）
选择器介绍：
常用选择器：
（1）元素选择器，根据标签名来选中指定的元素。标签名{}
（2）id选择器（id的值必须唯一，不能重复），根据元素的id属性值选中一个元素。#id属性值{}
（3）类选择器（class的值可以相同），根据元素的class属性选中一组元素，可以给同一个元素设置多个class属性。 .class属性值{}
（4）通配选择器，选中页面中的所有元素。 *{}
复合选择器：
（1）交集选择器，选中同时复合多个条件的元素。选择器1选择器2....选择器n{}
（2）并集选择器，同时选择多个选择器对应的元素。选择器1，选择器2，....选择器n{}
关系选择器：
（1）子元素选择器，选中指定父元素的指定子元素。父元素>子元素
（2）后代元素选择器，选中指定元素内的指定后代元素。祖先 后代
（3）选择下一个兄弟（紧挨着的）。前一个+下一个
（4）选择下边所有的兄弟。兄~（波浪线）弟
属性选择器：
（1）[属性名] 选择含有指定属性的元素
（2）[属性名=属性值]选择含有指定属性和属性值的元素
（3）[属性名^=属性值]选择属性值以指定值开头的元素
（4）[属性名$=属性值]选择属性值以指定值结尾的元素
（5）[属性名*=属性值]选择属性值中含有某值的元素
伪选择器：以：开头
根据所有的子元素排序
（1）:first-child 第一个子元素
（2）:last-child最后一个子元素
（3）:nth-child()选中第n个子元素。n:0-正无穷；2n或even:偶数；2n+1或odd：奇数
在同类型元素中排序
（1）:first-of-type
（2）:last-of-type
（3）:nth-of-type()
（4）:not()否定伪类，将符合条件的元素从选择器中去除。
超链接a标签的伪类：
a:link 表示没有访问过的链接
a:visited 表示访问过的链接
下面两个可以应用于其他标签
a:hover 表示鼠标移入的状态
a:active 表示鼠标点击
<head> <style> a:visited{ color:coral } a:link{ color:crimson; } a:hover{ color: chartreuse; } a:active{ color: blue; } </style> </head> <body> <a href="www.qq">超链接1</a> <a href="www.qq">超链接2</a> </body>伪元素：
页面中的一些特殊位置。以::开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始，结合content属性使用
::after 元素的最后，结合content属性使用
<head> <style> h2::before{ content: "start"; color:brown; } h2::after{ content: "end"; color:yellowgreen; } </style> </head> <body> <h2>前端css演示</h2> <h2>前端css演示</h2> </body>上述代码运行结果：
版权声明：本文标题：CSS菜鸟学习笔记1 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1687027290a129429.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论