行业知识
前端CSS样式零基础教学总结，UI、前端开发都适用
文章目录
- 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}会覆盖p{margin:6px;}
第五优先级：由一个或多个类型选择器定义。如p{marigin:6px;}覆盖*{margin:10px；}
第六优先级：通配选择器，如 * {marigin:6px;}
（4）css优先级 的 优先顺序
Inline style（内联样式） > Internal style sheet（内部样式） > External style sheet（外部样式）
优先级: 继承 0 标签p 1 伪类选择器 10 属性选择器 10 类选择器 10 id选择器 100 内联样式优先级 1000 !important 最牛逼 10000 相同优先级的,后面的覆盖前面的，数值越大越优先
！important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配选择器 > 继承选择器
各项示例:
内联样式：写在标签属性style的样式，如
ID选择器，如#id{…}
类选择器，如 .class{…}
属性选择器，如 input[type=“email”]{…}
伪类选择器，如a:hover{…}
伪元素选择器，如 p::before{…}
标签选择器，如 input{…}
通配选择器，如 *{…}
案例：
css学习 css的三种引入方法 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 {}
在原有元素之后插入内容：
设置鼠标选中内容后的文字样式
设置选中后的背景颜色，文字颜色
上一篇：世界怎么免费做服务器?
下一篇：前端ul好看的li列表样式
