公司网站建设升上去,网站策划书怎么做的美观,哪有恶意点击软件买的,阳江问政平台官网入口本专栏内容为#xff1a;前端专栏 记录学习前端#xff0c;分为若干个子专栏#xff0c;html js css vue等 #x1f493;博主csdn个人主页#xff1a;小小unicorn ⏩专栏分类#xff1a;css专栏 #x1f69a;代码仓库#xff1a;小小unicorn的代码仓库#x1f69a; 前端专栏 记录学习前端分为若干个子专栏html js css vue等 博主csdn个人主页小小unicorn ⏩专栏分类css专栏 代码仓库小小unicorn的代码仓库 关注我带你学习编程知识 目录 什么是cssCSS语法CSS使用内部CSS行内CSS外部CSS 选择器CSS 元素选择器id选择器类选择器CSS 通用选择器分组选择器后代选择器子选择器伪类选择器锚伪类伪类和 CSS 类悬停在 div 上简单的工具提示悬停force 伪类选择器为超链接添加不同样式小结 什么是css
CSS 指的是层叠样式表* (Cascading Style Sheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS 节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在 CSS 文件中*也称级联样式表。
CSS演示一个html页面可以有不同的效果
CSS语法
CSS 规则集rule-set由选择器和声明块组成 选择器指向您需要设置样式的 HTML 元素。 声明块包含一条或多条用分号分隔的声明。 每条声明都包含一个CSS属性名称和一个值以冒号分隔。 多条CSS声明用分号分隔声明块用花括号括起来。
举个例子
在此例中所有 p元素都将居中对齐并带有红色文本颜色
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title第一个实例/titlestylebody{background-color: lightblue;}h1{color:green;text-align: center;}p{font-family: Verdana;color:red;text-align: center;font-size: 20px;}/style
/head
bodyh1我的第一个CSS实例/h1p在此例子中,所有p元素都将居中对齐,并带有红色文本颜色/pp这是一个段落/p
/body
/html例子解释
p 是 CSS 中的选择器它指向要设置样式的 HTML 元素。color 是属性red 是属性值 text-align 是属性center 是属性值
注意
CSS要写到style标签中style标签可以放到页面任意位置一般放到head标签内css使用/**/作为注释使用ctrl/快速切换
CSS使用
有三种插入样式表的方法
外部 CSS内部 CSS行内 CSS
内部CSS
如果一张HTML页面拥有唯一的样式那么可以使用内部样式表。
内部样式是在 head 部分的style元素中进行定义。
示例
内部样式在 HTML 页面的 head 部分内的style元素中进行定义
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody{background-color: linen;}h1{color:maroon;margin-left: 40px;}/style
/head
bodyh1这是一个内部引入/h1p这是一个段落/p
/body
/html行内CSS
行内样式也称内联样式可用于为单个元素应用唯一的样式。
如需使用行内样式请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody{background-color: linen;}h1{color:maroon;margin-left: 40px;}/style
/head
bodyh1这是一个内部引入/h1p这是一个段落/ph1 stylecolor: blue;text-align: left;这是一个行内引入/h1p stylecolor: red;text-align: left;这是一个段落/p
/body
/html外部CSS
通过使用外部样式表您只需修改一个文件即可改变整个网站的外观
每张 HTML 页面必须在 head 部分的link元素内包含对外部样式表文件的引用。
而这个也是我们开发中最常用的方式
1.创建一个css文件 2.使用link标签引入css
link relstylesheet href[css路径]创建demo.html:
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidth, initial-scale1.0titleDocument/titlelink relstylesheet hrefstyle.css
/head
bodydiv上帝为你关上一扇门然后去睡觉了/div
/body
/html创建style.css
div{color:aqua;font-size: 80px;
}选择器
CSS 选择器用于“查找”或选取要设置样式的 HTML元素。
我们可以将 CSS 选择器分为五类
简单选择器根据名称、id、类来选取元素组合器选择器根据它们之间的特定关系来选取元素伪类选择器根据特定状态选取元素伪元素选择器选取元素的一部分并设置其样式属性选择器根据属性或属性值来选取元素
此页会讲解最基本的 CSS 选择器。
CSS 元素选择器
元素选择器根据元素名称来选择 HTML 元素。
实例
在这里页面上的所有p元素都将居中对齐并带有红色文本颜色
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep{text-align: center;color:red;}/style
/head
bodyp每个段落都会受影响/pp我也是/p
/body
/html id选择器
id 选择器使用HTML元素的id属性来选择特定元素。
元素的id在页面中是唯一的因此 id 选择器用于选择一个唯一的元素
要选择具有特定 id 的元素请写一个井号后跟该元素的 id。
实例 这条CSS规则将应用于idpara1的 HTML 元素
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#para1{text-align: center;color:red;}/style
/head
bodyp idpara1你好世界/pp本段不受影响/p
/body
/html 注意id 名称不能以数字开头。
类选择器
类选择器选择有特定class属性的 HTML 元素。
如需选择拥有特定 class 的元素请写一个句点.字符后面跟类名。
实例 在此例中所有带有 classcenter 的 HTML 元素将为红色且居中对齐
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#para1{text-align: center;color:red;}.center{text-align: center;color:red;}/style
/head
bodyp idpara1你好世界/pp本段不受影响/ph1 classcenter这是一个类选择器/h1p classcenter居中的红色段落/p
/body
/html 当然我们 还可以指定只有特定的HTML元素会受类的影响。 在这个例子中只有具有classcenter的p元素会居中对齐
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#para1{text-align: center;color:red;}.center{text-align: center;color:red;}p.center{text-align: left;color:black;}/style
/head
bodyp idpara1你好世界/pp本段不受影响/ph1 classcenter这是一个类选择器/h1p classcenter居中的红色段落/p
/body
/html HTML 元素也可以引用多个类。 在这个例子中p 元素将根据 classcenter 和 classlarge 进行样式设置
p classcenter large这个段落引用两个类。/p!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#para1{text-align: center;color:red;}.center{text-align: center;color:red;}p.center{text-align: center;color:black;}p.lage{font-size: 300%;}/style
/head
bodyp idpara1你好世界/pp本段不受影响/ph1 classcenter这是一个类选择器/h1p classcenter居中的红色段落/pp classcenter lage本段是居中并且使用大号字体的/p
/body
/html注意类名不能以数字开头
CSS 通用选择器
通用选择器*选择页面上的所有的 HTML 元素。
下面的 CSS 规则会影响页面上的每个HTML元素
* {text-align: center;color: blue;
}!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{text-align: center;color: blue;}#para1{text-align: center;color:red;}.center{text-align: center;color:red;}p.center{text-align: center;color:black;}p.lage{font-size: 300%;}/style
/head
bodyp idpara1你好世界/ph1Hello world!/h1p页面上的每个元素都会受到样式的影响。/pp 我也是/pp还有我/ph1 classcenter这是一个类选择器/h1p classcenter居中的红色段落/pp classcenter lage本段是居中并且使用大号字体的/p
/body
/html分组选择器
分组选择器选取所有具有相同样式定义的 HTML 元素。
请看下面的 CSS 代码h1、h2 和 p 元素具有相同的样式定义
h1 {text-align: center;color: red;
}h2 {text-align: center;color: red;
}p {text-align: center;color: red;
}最好对选择器进行分组以最大程度地缩减代码。
如需对选择器进行分组请用逗号来分隔每个选择器。
实例 在这个例子中我们对上述代码中的选择器进行分组
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidth, initial-scale1.0titleDocument/titlestyleh1,h2,p{text-align: center;color:red;font-size: 300%;}/style
/head
bodyh1这是一个分组选择器/h1h2更小的标题/h2p这是一个段落/p
/body
/html基础选择器小结
后代选择器
又叫包含选择器. 选择某个父元素中的某个子元素.
元素1 元素2 {样式声明}元素 1 和 元素 2 要使用空格分割元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1
代码示例1: 把 ol 中的 li 修改颜色, 不影响 ul
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidth, initial-scale1.0titleDocument/titlestyleh1,h2,p{text-align: center;color:red;font-size: 300%;}ol li{color: green;}/style
/head
bodyh1这是一个分组选择器/h1h2更小的标题/h2p这是一个段落/pulliaaa/lilibbb/liliccc/li/ulolliddd/lilieee/lilifff/li/ol
/body
/html代码示例2: 元素 2 不一定非是 儿子, 也可以是孙子
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidth, initial-scale1.0titleDocument/titlestyleh1,h2,p{text-align: center;color:red;font-size: 300%;}ol li{color: green;}ul a{color:yellow;}/style
/head
bodyh1这是一个分组选择器/h1h2更小的标题/h2p这是一个段落/pulliaaa/lilibbb/liliccc/lili还可以是孙子/lilia href#mmmm/a/li/ulolliddd/lilieee/lilifff/li/ol
/body
/html代码示例3: 可以是任意基础选择器的组合. (包括类选择器, id 选择器)
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidth, initial-scale1.0titleDocument/titlestyleh1,h2,p{text-align: center;color:red;font-size: 300%;}ol li{color: green;}ul a{color:yellow;}.one li a{color: red;}/style
/head
bodyh1这是一个分组选择器/h1h2更小的标题/h2p这是一个段落/pulliaaa/lilibbb/liliccc/lili还可以是孙子/lilia href#mmmm/a/li/ulolliddd/lilieee/lilifff/li/olol classoneli可以是基础选择器的组合/liliddd/lilieee/lilia href#fff/a/lilia href#fff/a/lilia href#fff/a/li/ol
/body
/html子选择器
和后代选择器类似, 但是只能选择子标签.
元素1元素2 { 样式声明 }使用大于号分割只选亲儿子, 不选孙子元素 div classtwoa href#链接1/apa href#链接2/a/p/div后代选择器的写法, 会把链接1 和 2 都选中
.two a{color: aquamarine;}子选择器的写法, 只选链接 1 .twoa{color: aquamarine;}练习1
把以下代码中的 “小猫” 改成红色 div classcatulli练习1/lilia href#小猫/a/lilia href#小猫/a/lilia href#小猫/a/li/ul/divcss /* 练习1 */.cat a{color:red;}把以下代码中的 “小猫” 改成红色 div classcatli练习2/lia href#小猫/aullia href#小狗/a/lilia href#小狗/a/li/ul/divcss: .cata{color: red;}伪类选择器
伪类用于定义元素的特殊状态。
例如它可以用于
设置鼠标悬停在元素上时的样式为已访问和未访问链接设置不同的样式设置元素获得焦点时的样式
伪类的语法
selector:pseudo-class {property: value;
}锚伪类
链接能够以不同的方式显示
a:link 选择未被访问过的链接a:visited 选择已经被访问过的链接a:hover 选择鼠标指针悬停上的链接a:active 选择活动链接(鼠标按下了但是未弹起)
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 未访问的链接 */a:link{color:black;/* 去掉链接中的下划线 */text-decoration: none;}/* 已访问的链接 */a:visited{color:red;}/* 鼠标悬停链接 */a:hover{color:aqua;}/* 已经选择的链接 */a:active{color:green;}/style
/head
bodyh1CSS 链接/h1pba hrefhttps://blog.csdn.net/weixin_72066135?spm1011.2124.3001.5343 target_blank这是一个链接/a/b/ppb注释/b在 CSS 定义中a:hover 必须位于 a:link 和 a:visited 之后才能生效。/ppb注释/b在 CSS 定义中a:active 必须位于 a:hover 之后才能生效。/p
/body
/html注意a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后才能生效a:active 必须在 CSS 定义中的 a:hover 之后才能生效伪类名称对大小写不敏感。
按照 LVHA 的顺序书写, 例如把 active 拿到前面去, 就会导致active失效. 记忆规则 “绿化” 浏览器的 a 标签都有默认样式, 一般实际开发都需要单独制定样式. 实际开发主要给链接做一个样式, 然后给 hover 做一个样式即可. link, visited, active 用的不多.
伪类和 CSS 类
伪类可以与CSS类结合使用
当您将鼠标悬停在例子中的链接上时它会改变颜色
a.highlight:hover {color: #ff0000;
}悬停在 div 上
在
元素上使用 :hover 伪类的实例 div:hover {background-color: blue;
}!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 未访问的链接 */a:link{color:black;/* 去掉链接中的下划线 */text-decoration: none;}/* 已访问的链接 */a:visited{color:red;}/* 鼠标悬停链接 */a:hover{color:aqua;}/* 已经选择的链接 */a:active{color:green;}div{background-color: green;color: white;padding: 25px;text-align: center;}div:hover{background-color: blue;}/style
/head
bodyh1CSS 链接/h1pba hrefhttps://blog.csdn.net/weixin_72066135?spm1011.2124.3001.5343 target_blank这是一个链接/a/b/ppb注释/b在 CSS 定义中a:hover 必须位于 a:link 和 a:visited 之后才能生效。/ppb注释/b在 CSS 定义中a:active 必须位于 a:hover 之后才能生效。/pp请把鼠标移动到最下面的div元素来改变其背景色/pdiv把鼠标移到我上面/div
/body
/html简单的工具提示悬停
把鼠标悬停到 div 元素以显示p元素类似工具提示的效果
悬停到我上面来显示p元素。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 未访问的链接 */a:link{color:black;/* 去掉链接中的下划线 */text-decoration: none;}/* 已访问的链接 */a:visited{color:red;}/* 鼠标悬停链接 */a:hover{color:aqua;}/* 已经选择的链接 */a:active{color:green;}/* div{background-color: green;color: white;padding: 25px;text-align: center;}div:hover{background-color: blue;} */p{display: none;background-color: yellow;padding: 20px;}div:hover p{display: block;}/style
/head
bodyh1CSS 链接/h1pba hrefhttps://blog.csdn.net/weixin_72066135?spm1011.2124.3001.5343 target_blank这是一个链接/a/b/ppb注释/b在 CSS 定义中a:hover 必须位于 a:link 和 a:visited 之后才能生效。/ppb注释/b在 CSS 定义中a:active 必须位于 a:hover 之后才能生效。/p!-- p请把鼠标移动到最下面的div元素来改变其背景色/pdiv把鼠标移到我上面/div --div请把鼠标移动到我上面来显示p元素p哈哈我在这里/p/div
/body
/htmlforce 伪类选择器
选取获取焦点的 input 表单元素. div classthreeinput typetextinput typetextinput typetextinput typetext/divcss: /* 此时被选中的表单的字体就会变成红色. */.threeinput:focus {color: red;}为超链接添加不同样式
本例演示如何向超链接添加其他样式
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylea.one:link {color:#ff0000;}a.one:visited {color:#0000ff;}a.one:hover {color:#ffcc00;}a.two:link {color:#ff0000;}a.two:visited {color:#0000ff;}a.two:hover {font-size:150%;}a.three:link {color:#ff0000;}a.three:visited {color:#0000ff;}a.three:hover {background:#66ff66;}a.four:link {color:#ff0000;}a.four:visited {color:#0000ff;}a.four:hover {font-family:monospace;}a.five:link {color:#ff0000;text-decoration:none;}a.five:visited {color:#0000ff;text-decoration:none;}a.five:hover {text-decoration:underline;}/style
/head
bodyp请把鼠标移到链接上并观察样式的变化/ppba classone href/index.html target_blank此链接改变颜色/a/b/ppba classtwo href/index.html target_blank此链接改变字体大小/a/b/ppba classthree href/index.html target_blank此链接改变背景色/a/b/ppba classfour href/index.html target_blank此链接改变字体族/a/b/ppba classfive href/index.html target_blank此链接改变文本装饰/a/b/p
/body
/html小结
