文章目录
1.CSS介绍2.css的基本使用(1)行内样式(2)内部样式(3)外部样式(3)css优先级 的 6大分类(4)css优先级 的 优先顺序(5)常用选择器
1.CSS介绍
CSS样式学习宝典,关注点赞加收藏,防止迷路哦
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化 CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
web项目开发中css的位置 css主要一般都是由前端开发工程师,或者UI设计师完成的. css3是目前的最新版本
学习工具 学习css一般有三种工具提供给我们开发:
代码编辑器本身一般自带提示或者语法提示. css手册,内部提供提供了所有的样式属性和样式值的使用参考,甚至包括一些演示代码. http://css.doyoe.com 浏览器也内置了一些css辅助工具给我们学习和开发. F12,或者Ctrl+shift+i,或者鼠标右键,检查代码
css的基本语法 格式: 选择符{ 样式属性: 属性值; 样式属性: 属性值 属性值 …; }
选择符{样式属性: 属性值;样式属性: 属性值 属性值 …;}
注意:
选择符主要是告诉浏览器,接下来花括号里面样式给哪一个标签或者哪一批标签添加外观的,在行内样式中,不需要加选择符样式属性主要是告诉浏览器, 给指定的标签添加什么样的外观,样式属性在同一个花括号里面或者同一个标签中,是唯一的.如果出现重复的话,在浏览器产生覆盖效果.属性值主要是告诉浏览器,给指定标签添加的指定外观是什么效果,一般如果没有指定样式,浏览器内部都会有对应的默认值,写上属性和属性值以后就会覆盖默认值.属性值也是唯一的. 多个属性值的情况下,必须使用英文的空格隔开.css中所有的代码,都不需要缩进或者换行.
注释 css中也有注释,注释的目的是为了解释代码的用途或者作用.方便其他开发者更好的了解当前的代码. /* 多行注释, 这里的内容就不会被显示或者不会被浏览器执行. */
单行注释 /* 字体颜色: 白色; */
2.css的基本使用
css在使用过程中,主要就是嵌套进网页中进行使用的.使用过程中,一般有三种引入方式:
(1)行内样式
主要在开始标签中, 通过style属性来编写样式.在工作中,行内样式是使用频率最少的.
一般都是将来通过来javascript来控制的样式才会使用行内样式.
(2)内部样式
主要通过在head的内部子标签style标签中编写css样式.
在开发中,内部样式主要都是编写在html网页内部,但是开发中一个web项目往往由多个html网页组成.
(3)外部样式
主要是在css文件中编写css样式, 然后在head的子标签link标签的href属性中指定css路径引入到网页中进行“导包”使用.
创建html网页,编写代码:
(3)css优先级 的 6大分类
通常可以将css的优先级由高到低分为6组:
第一优先级:无条件优先的属性只需要在属性后面使用**!important**。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。 第二优先级:在html中给元素标签加style,即内联样式。该方法会造成css难以管理,所以不推荐使用。 第三优先级:由一个或多个id选择器来定义。例如,#id{margin:0;}会覆盖.classname{margin:3pxl} 第四优先级:由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;} 第五优先级:由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px;} 第六优先级:通配选择器,如 * {marigin:6px;}
(4)css优先级 的 优先顺序
Inline style(内联样式) > Internal style sheet(内部样式) > External style sheet(外部样式)
优先级:
继承 0
标签div 1
伪类选择器 10
属性选择器 10
类选择器 10
id选择器 100
内联样式优先级 1000
!important 最牛逼 10000
相同优先级的,后面的覆盖前面的,数值越大越优先
!important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配选择器 > 继承选择器
各项示例: 内联样式:写在标签属性style的样式,如
ID选择器,如#id{…} 类选择器,如 .class{…} 属性选择器,如 input[type=“email”]{…} 伪类选择器,如a:hover{…} 伪元素选择器,如 p::before{…} 标签选择器,如 input{…} 通配选择器,如 *{…}
案例:
p
{color:blue;}
今天学习css
今天学习css
我们很开心
引入方式一:行内样式,优先级最高,当有其他样式与行内样式冲突时,以行内样式为准 直接在标签中通过style属性来编写样式
引入方式二:内嵌样式 主要通过head标签中的style字标签来编写样式 选择p标签,给所有的p标签都施加该样式
结果:内嵌样式不会改变行内样式结果,优先级没有行内样式高。其他未设置行内样式的p标签,被施加了该样式
引入方式三:外部样式 单独创建.css文件来编写样式,在head的子标签 link中通过href=''引入
(5)常用选择器
万能选择符* 在工作中, 星号基本不用, 如果有使用的话,基本就是用在页面的外观初始化时.
* { /* 代表网页中的所有元素 */
color: blue;
}
标签选择符 也叫元素选择符,可以指定同一种名称的标签的外观效果,例如,p,h1,a,li在css中都是标签选择符
ID选择符 给指定的标签指定id值,把这个id值作为选择符,左边加上#,就可以在css中给这个标签[html元素]加上样式了.
class类选择符 通过标签的class属性值可以对页面中的标签进行分类, 然后在css样式中,使用.分类名作为选择符,可以给指定分类的所有标签增加样式外观
案例:
/* 标签选择器*/
h1
{color:cyan}
/* 类选择器 点 类名 选择*/
.one
{color:green;}
/* ID选择器 # id名 选择 */
#two
{color:red;}
/* 组合选择器 */
h1,h2,h3,h4
{color:goldenrod;}
/* 越具体指定,优先级就越高 */
h1.one
{color:gray;}
h2#two
{color:greenyellow;}
1号标签111
1号标签222
2号标签333
我是span
我是h3标签
优先级顺序 !important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配选择器 id选择器是特指一个,不要多个元素设置相同id。如果要对多个元素相同配置,那就用类选择器或其他
!important 加在颜色后面,分号前面
过滤越具体,优先级越高
font
{color:greenyellow;}
.one
{color:blue;}
#two
{color: indigo;}
font
{color:greenyellow !important;} /*注意 !important 的位置*/
选择器的优先级
关系选择器
/* 多行注释 */
ul li /* 包含选择器/后代选择器 */
{color:darkslateblue;}
ul>li /* 父子选择器 */
{color:yellow;}
ol+li /* 相邻选择器 特指下面一个*/
{color:green;}
ol~li /* 兄弟选择器 特指下面一堆*/
{color:deeppink;}
- 动漫频道
- 学习频道
- 直播频道
- 游戏频道
- 少儿频道
- 智慧树,大风车
- 老年人频道
- 授课直播
- 亚洲捆绑
包含选择器,包含ul下的所有元素
父子选择器,只包含ul下的li
相邻选择器,向下指定
兄弟选择器,ol下面一堆li
下面的ol不被选择
属性选择器
input[name]
{background-color: dodgerblue;}
input[name=username]
{background-color: red;}
input[type=password]
{background-color:yellow;}
input[type=text]
{background-color:green;}
选择input里面的具有name属性的
指定input里面具有name属性,并且name的值是username的
伪类选择器
/* 鼠标悬停的时候触发 */
a:hover
{color:teal;}
/* 列表中第一个元素 */
ul li:first-child
{color:yellow;}
/* 列表中最后一个元素 */
ul li:last-child
{color:green;}
/* 列表中具体某一个元素 */
ul li:nth-child(4)
{color: red;}
/* 偶数个2n / even 奇数个2n-1 / odd n不可换 */
ul li:nth-child(even)
{color:turquoise;}
ul li:nth-child(odd)
{color:violet;}
/* 小练习 */
/* 1.写一个table表格,设置一个背景色 */
table
{background-color:green;}
/* 2.偶数行颜色为蓝色 */
table tr:nth-child(2n)
{background-color: blue;}
table tr td
{}
/* 3.第3 , 6 , 9 3倍行颜色为黄色 */
table tr:nth-child(3n)
{background-color:yellow;}
/* 4.鼠标滑过时,颜色变成红色 */
table tr:hover
{background-color: red;}
- 马春妮
- 孙坚
- 晓东
- 文东
- 王伟
- 好心
- 蜂拥
- 倩倩
- 石超
- 帅帅
111 | 222 | 333 | 444 |
111 | 222 | 333 | 444 |
111 | 222 | 333 | 444 |
111 | 222 | 333 | 444 |
111 | 222 | 333 | 444 |
111 | 222 | 333 | 444 |
111 | 222 | 333 | 444 |
111 | 222 | 333 | 444 |
111 | 222 | 333 | 444 |
111 | 222 | 333 | 444 |
伪类选择器,冒号的形式:hover 鼠标悬停上去后触发,移走后恢复: 可以是标签,tr td ul li 等 冒号 hover 伪类选择器种类:
ul的第一个元素 ul li:first-child
查找具体某一个li ul li:nth-child(4)
找到偶数个li ul li:nth-child(even)
奇数个li ul li:nth-child(odd)
设置表格中所有内容居中,可以将所有tr包含在tbody中,在tbody中设置
伪对象选择器
.name
{color:goldenrod;}
/* 在内容之前插入 */
.name::before
{
content:"我问:";
color:green;
}
/* 在内容之后插入 */
.name::after
{
content:"肯定对!";
color:magenta;
}
/* 鼠标选中后的样式 */
.name::selection
{
background-color: mediumspringgreen;
color: white;
}
王文很帅,对不对?
伪对象可以在原内容的基础上插入内容 在class为name的元素前面插入 我问: 颜色设为绿色 要用双冒号,单冒号是伪类选择器,双冒号是伪对象选择器 .name::before {}
在原有元素之后插入内容:
设置鼠标选中内容后的文字样式 设置选中后的背景颜色,文字颜色
相关文章
发表评论