css学习

复制代码
      CSS

文章目录

CSS(层叠样式表)

用来渲染html元素,改变页面的布局和外观

结构 #:包括选择器以及声明。每个声明以;结束,用{}括起来

选择器 声明 声明

h1 {color:blue;font-size:12px;}

属性 属性

例:

p

{

color:red;

text-align:center;

}

注释 # :以/开始,以/结束

选择器

id选择器:为标有特定id的元素指定特定的样式。以#来定义。(id属性不要以数字开头)

例:#para1

{

text-align:center;

color:red;

}

Hello World!

class选择器:描述一组元素的样式,可以在多个元素中使用。以.显示.(多个class选择器以空格或者换行分开)第一个字符不能使用数字

例:.center {text-align:center;}

p.center {text-align:center;}

创建

可以通过以下方式添加:

1.内联样式-在html元素中使用style属性。由于要将表现和内容混合,可能会损失部分优势

2.内部样式表-在html文档头部区域使用
3.外部样式表-使用外部CSS文件。适用于多页面,通过改变一个文件来改变整个站点的外观,每个页面使用标签链接到样式表。(标签在文档的头部) 例: 4.多重样式:当某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中继承过来。 例:外部样式表对h3有三个属性 h3 { color:red; text-align:left; font-size:8pt; } 内部样式表对h3有两个属性 h3 { text-align:right; font-size:20pt; } 如果拥有内部样式表的这个页面同时与外部样式表链接,那么h3的样式为: color:red; text-align:right; font-size:20pt; 即颜色属性被继承于外部样式表,文字排列和大小被内部样式表中的规则取代。 优先级:内联样式>内部样式>外部样式>浏览器默认样式

背景

页面背景的颜色在body的选择器中使用,例:body {background-color:#b0c4de;}

颜色的定义方式:

1.十六进制。如:"#ff0000"

2.RGB。如"rgb(255,0,0)"

3.颜色名称。如:"red"

文本与字体

文本颜色的使用与背景颜色使用类似。例:

body {color:red;}

h1 {color:#00ff00;}

h2 {color:rgb(255,0,0);}

链接

链接状态:

a:link {color:#000000;} /* 未访问链接*/

a:visited {color:#00FF00;} /* 已访问链接 /
a:hover {color:#FF00FF;} /
鼠标移动到链接上 /
a:active {color:#0000FF;} /
鼠标点击时 */

顺序规则:a:hover 必须跟在 a:link 和 a:visited后面

a:active 必须跟在 a:hover后面

列表

相关推荐
许白掰33 分钟前
Linux入门篇学习——Linux 编写第一个自己的命令
linux·运维·数据库·嵌入式硬件·学习
袁煦丞1 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
生如夏花℡1 小时前
HarmonyOS学习记录4
学习·华为·harmonyos
彤银浦1 小时前
Web学习笔记2
笔记·学习
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636021 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军1 小时前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句1 小时前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架