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后面

列表

相关推荐
web前端神器2 分钟前
指定阿里镜像原理
前端
枷锁—sha6 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha8 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜24 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台42 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化