css
Posted xp1315458571
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css相关的知识，希望对你有一定的参考价值。
一、什么是css
CSS（Cascading Style Sheet）：层叠样式表，定义html元素显示样式
浏览器按照我们定义的样式表格式，对文档进行格式化（渲染）。
二、注释样式
/*这是注释*/ /* 这是多行注释 这是多行注释 */ #常用注释 /*注释样式开头*/ ...... /*注释样式结束*/ #代码开头 /*这是博客园首页样式表*/
三 、语法结构
四、css三种引入方式
1.外部样式 推荐使用
将css样式写在一个单独的文件中，然后在页面进行引入。推荐使用此方式。
2.内部样式 还可以
嵌入式是将CSS样式集中写在
网页的<head></head>标签对的
<style></style>标签对中。
格式如下：
3.行内样式 不推荐大规模使用
五、css基本选择器
1.类选择器 常用
.c1 color: yellow;
点+类名 选择所有c1类的内容
2.id选择器 常用
#dbj color: aqua; font-size: 18px;
选择id为dbj的标签内的内容，id为数字时不行
#当id为div标签的id时，选中块内所有内容
3.标签选择器 了解
p color: aqua; font-size: 18px;
选择所有P标签内的内容
4.通用/全局选择器 几乎不用
* color: aqua; font-size: 18px;
所有内容
六、组合选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*后代选择器*/ div span color: red; /* 儿子选择器*/ /* div>span color: aqua;*/ /* 弟弟选择器:同级别的下面所有的标签*/ /* div~p color: greenyellow;*/ /* 毗邻选择器:紧挨着的下面的一个*/ /* div+span color: orange;*/ </style> </head> <body> <span>div上面第一个span</span> <span>div上面第二个span</span> <div>div <span>div里面的第一个span</span> <p>div里面的第一个p <span>div里面的第一个p里面的span</span> </p> <span>div里面最后一个span</span> </div> <p>div下面的第一个p<span>div下面的第一个p里面的span</span></p> <span>div下面的第一个span</span> <span>div下面的第二个span</span> <span>div下面的第三个span</span> <span>div下面的第三个span</span> </body> </html>
1.后代选择器
后代选择器，div的所有span后代，孙子儿子全都要
div span color: red;
2.儿子选择器
儿子选择器，选择div下面的span这个儿子
div>span color: aqua;
3.弟弟选择器
同级别的下面所有的span标签，其他兄弟不要，只要span
div~span color: brown;
4.毗邻选择器
毗邻选择器:紧挨着的，下面的第一个span
div+span color: orange;
七、属性选择器
/*找只要有hobby这个属性名的所有标签*/ [hobby] background-color: red;color: orange; /*找只要有hobby这个属性名并且值是jdb的所有标签*/ [hobby="jdb"] background-color: pink; /*找input标签下，具有属性名是hobby并且值是jdb的input标签*/ input[hobby="jdb"] background-color: greenyellow;
八、分组与嵌套
1.分组
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
分组： div,span, p color: pink;
三个标签中内容都选中
2.嵌套
/* 嵌套 多个不同的选择器 可以组合使用 */ #d1,.c1,span color: orange;
选择id为d1，类名为c1，和span标签的所有内容
九、伪类选择器
/*a标签内容，连接态*/ a:link color: pink; /*a标签内容，鼠标悬浮态*/ a:hover color: red;
/*a标签内容，鼠标点击态*/ a:active color: purple; /*a标签内容，访问过后的状态*/ a:visited color: dimgrey; /* input框被悬浮后的状态 */ input:hover background-color: red; /* input框被点击的状态 称之为获取焦点*/ input:focus background-color: orange;
十、伪类选择器
1.first-letter
给p标签首字母设置特殊样式：
p:first-letter font-size: 48px; color: red;
2.before
/*在每个<p>元素之前插入内容*/ p:before content:"*"; color:red;
3.after
/*在每个<p>元素之后插入内容*/ p:after content:"[?]"; color:blue;
before和after多用于清除浮动
十一、选择器优先级
以上是关于css的主要内容，如果未能解决你的问题，请参考以下文章
css [css：fadeout / fadein] css示例。 #css
css 深度提示#css中的css base builder CSS