2012-05-05 CSS学习笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/Jason_weibo/article/details/7605964

本文详细介绍了CSS的基本概念，包括内联样式、页面嵌入样式和外部引用样式，并深入探讨了DIV和SPAN元素的用法。接着讲解了CSS中的常见样式属性，如计量单位、背景颜色、文本颜色等。最后，文章详细阐述了CSS选择器的种类及其优先级，包括标签选择器、class选择器、ID选择器、组合选择器和伪选择器的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2012.5.5 CSS学习笔记

——张伟

CSS:层叠样式表
主要元素有：
->元素内联,直接修改自己的属性，例如：style='background=color:red'
->页面嵌入,放在<head></head>之间,统一页面所有同样的标签的属性
例如：
<head>
<title></title>
<style type="text/css">
input{background=color:red/}
</style>
</head>
->外部引用，不用自己再重新写，引用已有的标签属性即可。
例如：
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="cssa.css"/>
</head>

DIV:块
-><div>内容</div>，可以把内容当成一个整体快

span：
-><span>内容</span>，不改变原始文字格式，整体包括，不影响布局和显示。

常见样式：
->计量单位
->px:像素
->30%:百分比
->em：相对单位
->background-color:red 背景颜色
->color 文本颜色
->border-style:solid 边框风格（默认没有边框）
->border-color 边框颜色
->border-width 边框宽度
->display 元素是否显示
->none不显示
->block
->inline
->cursor 鼠标在元素上时显示的光标图标
->pointer 手状
->wait 漏斗状
->help 帮助
->list-style-type 是否在项目前显示圆点

样式选择器：
就是指这个样式适合于哪些元素，有三种
->标签选择器
->class选择器，定义的时候要用.号在前。在head里面定义，在body里面使用
->id选择器

优先级：
自己在属性里面改的最强

标签+class选择器：
实现同样的样式名对于不同的标签有不同的样式，只要在样式名前加标签名即可。在head里面定义，在body里面使用

ID选择器：
为指定的id的元素设定格式，id前面加#
例如：
<head>
#username
{
font-size:xx-large;
}
</head>
<body><
<input id="username" type="text" value="123"/>
/body>

关联选择器：
p strong{background-color:red}表示p标签内的内容使用的样式
例如：
<strong>adcdefg</strong>
<p><strong>adcdefg</strong></p>

组合选择器：
同时为多个标签设定一个样式
例如：
H1，H2 input{background-color:red}注意H1和H2之间用逗号隔开，没有逗号就表示是关联选择器

伪选择器：
为标签的状态设定不同的样式，通常用于超链接
->a:visited超链接点击过的样式
->a:active选中国超链接时的样式
->a:link超链接未被访问时的状态
->a:hover鼠标移到超链接时的状态
例如：
a:visited{text-decoration:none}
a:active{text-decoration:none}
a:link{text-decoration:none}
a:hover{text-decoration:none}