微网站开发企业选择,网站程序开发外包,在网站上做教育直播平台多少钱,qq赞网站推广免费零.前言
本系列适用于零基础小白#xff0c;亦或是初级前端工程师提升使用。
知识点较为详细#xff0c;如果追求非常详细#xff0c;请移步官方网站或搬运网站。
1.CSS简介
CSS全称#xff1a;“Cascading Style Sheets”#xff0c;中文名#xff1a;“层叠样式表”…零.前言
本系列适用于零基础小白亦或是初级前端工程师提升使用。
知识点较为详细如果追求非常详细请移步官方网站或搬运网站。
1.CSS简介
CSS全称“Cascading Style Sheets”中文名“层叠样式表”。
用于定义网页样式和布局的样式表语言。
通过CSS可以指定页面中各个元素的颜色、字体、大小、间距、边框等等样式。
如果HTML是一个房子的骨架那么CSS就是对房子进行精装修
2.CSS一般语法
CSS通常由选择器标签、id、class等、属性、属性值组成。 需要注意的是“属性对之间需要用分号隔开”、“属性对是以键值对的形式出现的”。
例如一个p标签选择器
p{background-color: aqua;font-size: 20px;
}
一.CSS的三种导入方式
1.1内部样式表
内部样式表将CSS样式放在HTML文档的head标签中并且使用style/style来指定内部样式表。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep{background-color: aqua;font-size: 20px;}/style
/head
bodyp我的颜色是aqua并且字体大小是20像素/p
/body
/html
效果如下 1.2内联样式
内联样式将CSS样式作为属性嵌入到标签中并且该样式只对嵌入该CSS样式的标签生效使用style属性来指定样式。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyp stylecolor: brown;font-size: larger;我的颜色是brown并且字体大小是larger/p
/body
/html效果 1.3外部样式表
外部样式表在HTML文档外部创建.CSS文件并且引入.CSS文件来实现样式表。
例如我们在HTML文档目录下有一个“style.css”文件 在该css文件中有如下样式 那么我们就可以在HTML文档中输入该style.css文件的路径来导入这个样式表
使用link标签的“href”属性来导入
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./css/style.css
/head
bodyh3我是使用外部样式表来装饰的h3标签~/h3
/body
/html效果 1.4三种导入方式的优先级
优先级从高到低为 “内联样式 内部样式表 外部样式表”。
当一个标签同时有上述多种样式时将默认使用最高优先级的样式来装饰自己。
看下面一个例子
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./css/style.cssstyleh3{color: aqua;}/style
/head
bodyh3 stylecolor: blue;我是使用最高优先级样式来装饰的h3标签~/h3
/body
/html最终效果 可以看到h3标签被内联样式所修饰。
二.8种选择器【重要】
2.0简介
选择器是使用CSS的基础不会使用选择器就不会使用CSS。
8种选择器“元素(标签)选择器”、“类选择器”、“ID选择器”、“通用选择器”、“子元素选择器”、“后代(包含)选择器”、“兄弟(并集)选择器”、“伪类选择器”。
选择器常在“内部样式表”、“外部样式表”中使用内联样式默认就是“ID选择器”。
选择器的格式 2.1元素(标签)选择器
顾名思义该选择器会对所有的标签进行一个装饰例如我们写了一个p标签的选择器那么所有的p标签都会被这个选择器所修饰。
用法
标签名{
属性:属性值;
属性:属性值;
.......
}
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 标签选择器 */p{background-color: aqua;font-size: larger;}/style
/head
bodyp这是一个标签选择器示例/pp这还是一个标签选择器示例/p
/body
/html效果 2.2类选择器
类选择器会修饰所有相同类的标签哪怕标签种类不同。
用法
注意类名前面有一个“点”
.类名{
属性:属性值;
属性:属性值;
.....
}
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 类选择器 */.myclass{background-color: black;color: brown;font-size: larger;}/style
/head
bodyp classmyclass这是一个类选择器示例/pdiv classmyclass这还是一个类选择器示例/div
/body
/html效果 2.3ID选择器
ID选择器会唯一的修饰某个标签通过ID来指定。
用法
PS一定注意在ID前面有一个“井号”
#ID{
属性:属性值;
属性:属性值;
....
}
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* ID选择器 */#myp{color: blue;font-size: larger;}/style
/head
bodyp idmyp这是一个ID选择器示例/pp这是另一个ID选择器示例,不过我没有被选中/p
/body
/html效果 2.4通用选择器
顾名思义给所有的标签修饰样式不管有没有ID、class故也被叫做“全局选择器”。
用法
PS只有一个“星号”表示全部
*{
属性:属性值;
属性:属性值;
.....
}
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 通用选择器 */*{color: blue;font-size: larger;}/style
/head
bodyp这是一个通用选择器的示例/pp idmyid这也是一个通用选择器示例/pp classmyclass这还是一个通用选择器示例/p
/body
/html
效果 2.5子元素选择器
子元素选择器可以指定修饰某个标签的子元素的样式对于父标签则不会修饰。
用法:
父元素方式 子元素方式{
属性:属性值;
属性:属性值
....
}
这里的父元素方式和子元素方式不唯一只要可以搜索到对应的父元素和子元素即可
即方式可以是“通过标签搜索”、“通过ID搜索”、“通过类名搜索”。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 子元素选择器 *//* 父元素使用类名搜索子元素使用ID搜索 */.father #son{font-size: larger;color: blue;}/style
/head
bodydiv classfather我是子元素,但我没有idp idson我也是子元素,但我有id/p/div
/body
/html
效果 2.6后代选择器
后代选择器也叫“孩子选择器”。
只要是父元素的孩子就可以被修饰可能有点绕不过仔细想一下就好了子元素的子元素不就是父元素的孩子(重孙子)吗
用法
父元素方法 后代元素方法{
属性:属性值;
属性:属性值;
.....
}
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 后代选择器 */.father .grandson{color: blue;font-size: larger;}/style
/head
bodydiv classfatherp classgrandson我是子代标签哦~/pdivp classgrandson我是后代标签哦~/p/div/div
/body
/html效果 2.7兄弟(并集)选择器
某个标签下方最近的一个同级标签被修饰。
用法
兄弟元素A 兄弟元素B{
属性:属性值;
属性:属性值;
....
}
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 兄弟选择器 */h1 p{color: blue;font-size: larger;}/style
/head
bodyh1我是兄弟A/h1p我是兄弟B/p
/body
/html效果 2.8伪类选择器【重要但不常用】
在某些特定条件下的元素应用样式(用户交互等)。
例如鼠标悬停状态、鼠标跟踪等等
不常用待用到的时候查查百度好了....
用法
元素 : 伪类方法{
属性:属性值;
属性:属性值;
....
}
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 伪类选择器 */p:hover{background-color: blue;}p{background-color: brown;}/style
/head
bodyp鼠标悬停到我身上我会变色哦~/p
/body
/html效果
鼠标没有移动到p标签时 移动上去后 2.9八种选择器的优先级
优先级从高到低
“ID选择器 类选择器 后代选择器 元素(标签)选择器”
“子代选择器 后代选择器”
“伪类选择器可以与其它任何选择器并存”
“元素(标签)选择器优先级永远最低”
三.其它
关于CSS的属性设置、其它设置请参考作者的下一篇文章
