企业做网站有用么,wordpress tinymce,网站建设策划师,专门做辅助的扎金花网站文章目录 1、CSS基础1.1 CSS简介1.2 CSS编写位置1.2.1 行内样式1.2.2 内部样式1.2.3 外部样式1.2.4 样式优先级 1.2.5 CSS代码风格 2、CSS选择器2.1、基本选择器2.1.1 通配选择器2.1.2 元素选择器2.1.3 类选择器2.1.4 ID选择器2.1.5 总结 2.2、CSS复合选择器2.2.1 交集选择器2.… 文章目录 1、CSS基础1.1 CSS简介1.2 CSS编写位置1.2.1 行内样式1.2.2 内部样式1.2.3 外部样式1.2.4 样式优先级 1.2.5 CSS代码风格 2、CSS选择器2.1、基本选择器2.1.1 通配选择器2.1.2 元素选择器2.1.3 类选择器2.1.4 ID选择器2.1.5 总结 2.2、CSS复合选择器2.2.1 交集选择器2.2.2 并集选择器2.2.3 后代选择器2.2.4 子代选择器2.2.5 兄弟选择器2.2.6 属性选择器2.2.7 伪类选择器1动态伪类2结构伪类3否定伪类4UI伪类5目标伪类6语言伪类 2.2.8 伪元素选择器 2.3、选择器的优先级 1、CSS基础
1.1 CSS简介 CSSCascading Style层叠样式表一种标记语言用于给HTML结构设置样式。例如文字大小、颜色、元素宽度等。 核心思想HTML搭建结构CSS添加样式实现了结构与样式的分离。
1.2 CSS编写位置
1.2.1 行内样式
写在标签的style属性中
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title位置1_行内样式/title
/head
bodyh1 stylecolor: green;font-size: 80px;欢迎/h1h2 stylecolor: green;font-size: 80px;欢迎学习前端/h2
/body
/html存在的问题没有体现结构与样式分离的思想。
1.2.2 内部样式
写在style标签中
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title位置2_内部样式/titlestyleh1{color: green;font-size: 40px;}h2{color: red;font-size: 60px;}p{color: blue;font-size: 80px;}img{width: 200px;}/style
/head
bodyh1欢迎来到尚硅谷学习/h1h2欢迎学习前端/h2p北京欢迎你/pp上海欢迎你/p
/body
/html1.2.3 外部样式
写在.css文件中
link relstylesheet, href./xxx.csshref引入的文档来自哪里rel说明引入的文档与当前文档之间的关系
例html文件
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title位置3_外部样式/titlelink relstylesheet href./position3.css/headbodyh1欢迎来到尚硅谷学习/h1h2欢迎学习前端/h2p北京欢迎你/pp上海欢迎你/p/body
/htmlposition3.css文件
h1{color: green;font-size: 40px;
}
h2{color: red;font-size: 60px;
}
p{color: blue;font-size: 80px;
}
img{width: 200px;
}1.2.4 样式优先级
优先级规则行内样式内部样式外部样式
1.2.5 CSS代码风格
展开风格开发时推荐便于维护和调试
h1 {color: red;font-size: 40px;
}紧凑风格项目上线时推荐可减少文件体积
h1{color:red;font-size:40px;}注意项目上线时会通过工具将展开风格的代码变成紧凑风格这样可以减少文件体积节约网络流量同时也能让用户打开网页时速度更快。
2、CSS选择器
CSS选择器整体分两大类 一、基本选择器
通配选择器元素选择器类选择器ID选择器 二、复合选择器交集选择器并集选择器后代选择器子代选择器。。。
2.1、基本选择器
2.1.1 通配选择器
作用选中所有的HTML元素
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title01_通配选择器/titlestyle* {color: orange;font-size: 40px;}/style/headbodyh1欢迎来到土味官网土的味道我知道/h1brh2土味情话/h2h3作者优秀的网友们/h3p万水千山总是情爱我多点行不行/p/body
/html2.1.2 元素选择器
作用为页面中某种元素统一设置样式
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title02_元素选择器/titlestyleh2 {color: chocolate;}h3 {color: green;}p {color: red;}h1 {font-size: 50px; }/style
/head
bodyh1欢迎来到土味官网土的味道我知道/h1brh2土味情话/h2h3作者优秀的网友们/h3p万水千山总是情爱我多点行不行/pbrh2反杀土味情话/h2h3作者更优秀的网友们/h3p一寸光阴一寸金劝你死了这条心/p/body
/html2.1.3 类选择器
作用根据元素的class值来选中某些元素
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title03_类选择器/titlestyle/* 选中页面中所有类名为speak的元素 */.speak {color: red;}/* 选中页面中所有类名为answer的元素 */.answer {color: green;}/* 选中页面中所有类名为big的元素 */.big {font-size: 60px;}/style
/head
bodyh1欢迎来到土味官网土的味道我知道/h1brh2土味情话/h2h3作者优秀的网友们/h3p classspeak big我对你说万水千山总是情爱我多点行不行/pp classspeak我对你说草莓、蓝莓、蔓越莓今天你想我了没/pp classspeak我对你说我心里给你留了一块地我的死心塌地/pspan classspeak哈哈/spanbrh2反杀土味情话/h2h3作者更优秀的网友们/h3p classanswer你回答我一寸光阴一寸金劝你死了这条心/pp classanswer你回答我西瓜、南瓜、哈密瓜把你打成大傻瓜/pp classanswer你回答我我心里只有一块地我的玛莎拉蒂/p
/body
/html2.1.4 ID选择器
作用根据元素的id属性值来精准选中某个元素。
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title04_ID选择器/titlestyle#earthy {color: red;}#turn-earthy {color: blue;}.turn {font-size: 60px;}/style
/head
bodyh1欢迎来到土味官网土的味道我知道/h1brh2 idearthy土味情话/h2h3作者优秀的网友们/h3p我对你说万水千山总是情爱我多点行不行/pspan哈哈/spanbrh2 idturn-earthy classturn反杀土味情话/h2h3作者更优秀的网友们/h3p你回答我一寸光阴一寸金劝你死了这条心/p
/body
/html2.1.5 总结 2.2、CSS复合选择器
2.2.1 交集选择器
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title01_交集选择器/titlestyle/* 选中类名为rich的元素*/.rich {color: gold;}/* 选中类名为beauty的元素*/.beauty {color: red;}/* 选中类名为beauty的p元素这种形式元素配合类选择器以后用的很多 */p.beauty {color: green;}/* 选中同时具备rich和beauty类名的元素 */.rich.beauty {color: orange;}/style
/head
bodyh2 classrich土豪张三/h2h2 classbeauty明星李四/h2h2 classrich beauty土豪明星王五/h2hrp classbeauty小狗旺财/pp classbeauty小猪佩奇/p
/body
/html2.2.2 并集选择器
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title02_并集选择器/titlestyle.rich {color: gold;}.beauty {color: red;}.dog {color: blue;}.pig {color: green;}/* 选中类名为rich或beauty或dog或pig或id为suxi的元素*/.rich,.beauty,.dog,.pig,#suxi {font-size: 40px;background-color: gray;width: 180px;}/style
/head
bodyh2 classrich土豪张三/h2h2 classbeauty明星李四/h2h2破产王五不加任何样式/h2hrp classdog小狗旺财/pp classpig小猪佩奇/pp idsuxi小羊苏西/p
/body
/html2.2.3 后代选择器
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title03_后代选择器/titlestyleul li {color: red;}ol li {color: green;}ul li a {color: orange;}ol li a {color: gray;}.subject li.front-end {color: blue;}.subject div.front-end {color: chocolate;}/style
/head
bodyulli抽烟/lili喝酒/lilia href#烫头/a/li/ulhrolli张三/lili李四/lilia href#王五/a/li/olhrol classsubjectli classfront-end前端/lidiv classfront-end学科介绍学好前端挂帅杨帆/divliJava/lili大数据/liliUI/li/ol
/body
/html2.2.4 子代选择器
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title04_子代选择器/titlestylediva {color: red;}divpa{color: skyblue;}.foota {color: chocolate;}/style
/head
bodydiva href#张三/aa href#李四/aa href#王五/apa href#赵六/adiv classfoota href#孙七/a/div/p/div
/body
/html2.2.5 兄弟选择器
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title05_兄弟选择器/titlestyle/* 选中div后紧紧相邻的兄弟p元素睡在我下铺的兄弟—— 相邻兄弟选择器 *//* divp {color: red;} *//* 选中div后所有的兄弟p元素睡在我下铺的所有兄弟—— 通用兄弟选择器 */div~p {color: red;}li~li {color: orange;}/style
/head
bodydiv尚硅谷/divp前端/ppJava/pp大数据/ppUI/pulli主页/lili秒杀/lili订单/lili我的/li/ul
/body
/html2.2.6 属性选择器 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title06_属性选择器/titlestyle/* 第一种写法选中具有title属性的元素 *//* [title] {color: red;} *//* 第二种写法选中具有title属性且属性值为atguigu1的元素 *//* [titleatguigu1] {color: red;} *//* 第三种写法选中具有title属性且属性值以字母a开头的元素 *//* [title^a] {color: red;} *//* 第四种写法选中具有title属性且属性值以字母u结尾的元素 *//* [title$u] {color: red;} *//* 第五种写法选中具有title属性且属性值包含字母u的元素 *//* [title*u] {color: red;} *//style
/head
bodydiv titleatguigu1尚硅谷1/divdiv titleatguigu2尚硅谷2/divdiv titleguigu尚硅谷3/divdiv titleguigu classschool尚硅谷4/div
/body
/html2.2.7 伪类选择器
作用选中特殊状态的元素 伪类像类class但不是类是元素的一种特殊状态
1动态伪类
:link超链接未被访问的状态 :visited超链接访问过的状态 :hover鼠标悬停在元素上的状态 :active元素激活的状态 :focus获取焦点的元素 什么是激活–按下鼠标不松开 注意遵循LVHA的顺序即link、visited、hover、active 表单类元素才使用focus伪类 当用户点击元素、触摸元素、或通过键盘的tab键等方式选择元素时就是获得焦点 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title08_伪类选择器_动态伪类/titlestyle/* 选中的是没有访问过的a元素 */a:link {color: orange;}/* 选中的是访问过的a元素 */a:visited {color: gray;}/* 选中的是鼠标悬浮状态的a元素 */a:hover {color: skyblue;}/* 选中的是激活状态的a元素 */a:active {color: green;}/* 选中的是鼠标悬浮的span元素 */span:hover {color: green;}/* 选中的是激活的span元素 */span:active {color: red;}/* 选中的是获取焦点状态的input元素、获取焦点状态的select元素 */input:focus,select:focus {color: orange;background-color: green;}/style
/head
bodya hrefhttps://www.baidu.com去百度/aa hrefhttps://www.jd.com去京东/aspan尚硅谷/spanbrinput typetextbrinput typetextbrinput typetextselectoption valuebeijing北京/optionoption valueshanghai上海/option/select
/body
/html2结构伪类
常用 :first-child所有兄弟元素中的第一个 :last-child所有兄弟元素中的最后一个 :nth-child(n)所有兄弟元素中的第n个 :first-of-type所有同类型兄弟元素中的第一个 :last-of-type所有同类型兄弟元素中的最后一个 :nth-of-type(n)所有同类型兄弟元素中的第n个 了解 :nth-last-child(n)所有兄弟元素中的倒数第n个 :nth-last-of-type(n)所有同类型兄弟元素中的倒数第n个 :only-child选择没有兄弟的元素独生子女 :only-of-type选择没有同类型兄弟的元素 :root根元素 :empty内容为空元素空格也算内容 关于n的值 0或不写什么都选不中—几乎不用n选中所有子元素—几乎不用1~正无穷的整数选中对应序号的子元素2n或even选中序号为偶数的子元素2n1或odd选中序号为奇数的子元素-n3选中的时前3个 例1
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title09_伪类选择器_结构伪类_1/titlestyle/* 选中的是div的第一个儿子p元素按照所有兄弟计算的 —— 看结构1 */divp:first-child {color: red;}/style/headbody!-- 结构1 --divp张三98分/pp李四88分/pp王五78分/pp赵六68分/p/div/body
/html例2
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title09_伪类选择器_结构伪类_1/titlestyle/* 选中的是div的第一个儿子p元素按照所有兄弟计算的 —— 看结构2 */divp:first-child {color: red;}/style/headbody!-- 结构2 --divspan张三98分/spanp李四88分/pp王五78分/pp赵六68分/p/div/body
/html例3
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title09_伪类选择器_结构伪类_1/titlestyle/* 选中的是div的后代p元素且p的父亲是谁无所谓但p必须是其父亲的第一个儿子按照所有兄弟计算的 —— 看结构3 */div p:first-child {color: red;}/style/headbody!-- 结构3 --p测试1/pdivp测试2/pmarqueep测试3/pp张三98分/p/marqueep李四88分/pp王五78分/pp赵六68分/p/div/body
/html3否定伪类
:not(选择器)排除满足括号中条件的元素
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title12_伪类选择器_否定伪类/titlestyle/* 选中的是div的儿子p元素但是排除类名为fail的元素 *//* divp:not(.fail) {color: red;} *//* 选中的是div的儿子p元素但是排除title属性值以“你要加油”开头的 *//* divp:not([title^你要加油]) {color: red;} *//* 选中的是div的儿子p元素但排除第一个儿子p元素 */divp:not(:first-child) {color: red;}/style
/head
bodydivp张三98分/pp李四88分/pp王五78分/pp赵六68分/pp classfail title你要加油啊孙七孙七58分/pp classfail title你要加油啊老八老八48分/p/div
/body
/html4UI伪类
:checked被选中的复选框或单选按钮 :enable可用的表单元素没有disabled属性 :disabled不可用的表单元素有disabled属性 5目标伪类
:target选中锚点指向的元素
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title14_伪类选择器_目标伪类/titlestylediv {background-color: gray;height: 300px;}div:target {background-color: green;}/style
/head
bodya href#one去看第1个/aa href#two去看第2个/aa href#three去看第3个/aa href#four去看第4个/aa href#five去看第5个/aa href#six去看第6个/adiv idone第1个/divbrdiv idtwo第2个/divbrdiv idthree第3个/divbrdiv idfour第4个/divbrdiv idfive第5个/divbrdiv idsix第6个/div
/body
/html6语言伪类
:lang()根据指定的语言选择元素本质是看lang属性的值
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title15_伪类选择器_语言伪类/titlestylediv:lang(en) {color: red;}:lang(zh-CN) {color: green;}/style/headbodydiv尚硅谷1/divdiv langen尚硅谷2/divp前端/pspan你好/span/body
/html2.2.8 伪元素选择器
作用选中元素中的一些特殊位置
常用伪元素
::first-letter选中元素中的第一个文字::first-line选中元素中的第一行文字::selection选中被鼠标选中的内容::placeholder选中输入框的提示文字::before在元素最开始的位置创建一个子元素必须用content属性指定内容::after在元素最后的位置创建一个子元素必须用content属性指定内容
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title16_伪元素选择器/titlestyle/* 什么是伪元素 —— 很像元素但不是元素element是元素中的一些特殊位置 *//* 选中的是div中的第一个文字 */div::first-letter {color: red;font-size: 40px;}/* 选中的是div中的第一行文字 */div::first-line {background-color: yellow;}/* 选中的是div中被鼠标选择的文字 */div::selection {background-color: green;color: orange;}/* 选中的是input元素中的提示文字 */input::placeholder {color: skyblue;}/* 选中的是p元素最开始的位置随后创建一个子元素 */p::before {content:;}/* 选中的是p元素最后的位置随后创建一个子元素 */p::after {content:.00}/style
/head
bodydivLorem ipsum dolor sit amet consectetur adipisicing elit. Sunt quibusdam amet eligendi velit dolore sequi, exercitationem consequatur, quis maiores tempore accusantium ipsum aspernatur iusto fugiat fuga natus est placeat. Accusamus maiores culpa et sunt dolorum incidunt. Ducimus in odio tempora minima provident deleniti, ex voluptatem facere, molestias unde exercitationem pariatur rem vero ut quidem quaerat aliquam, nam debitis perspiciatis. Facere?/divbrinput typetext placeholder请输入您的用户名p199/pp299/pp399/pp499/p
/body
/html2.3、选择器的优先级
通过不同的选择器选中相同的元素并且为相同的样式名设置不同的值时就发生了样式的冲突。 到底应用哪个样式此时就需要看优先级了。 行内样式 ID选择器 类选择器 元素选择器 通配选择器 权重计算方式每个选择器都可计算出一种权重格式为a,b,c aID选择器的格式 b类、伪类、属性选择器的个数 c元素、伪元素选择器的个数 例
特殊规则
行内样式权重大于所有选择器!important的权重大于行内样式大于所有选择器权重最高
