css知识点记录

CSS(Cascading Style Sheets)层叠样式表
定义如何显示 HTML 元素,通常存储在样式表中,分离了html内容与表现 HTML 元素被不止一个样式定义时,层叠优先次序:
内联样式(在 HTML 元素内部),内部样式表(位于 <head> 标签内部),外部样式表,浏览器缺省设置
CSS 构成:选择器,一条或多条声明,用大括号包围声明; 提问网站声明由属性和值组成;属性和值被冒号分开。属性值与单位之间留有空格。
selector {property: value;property: value;property: value;}
h1 {
text-align: center;
color: black;
font-family: arial;
} 选择器的分组 h1,h2,h3,h4,h5,h6 {color: red;} 派生选择器:通过元素在其位置的上下文关系定义样式。合理使用派生选择器,html代码可变得更整洁。
h1 strong {color: red;}
strong {color: blue;}
h1 {color: blue;} id 选择器:id 选择器可为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。
#red {color:red;}
<div id="red">这里是红色</div>
#id html元素 {...}表示出现在 id 的html元素内的其他元素,应用这个样式。
html元素#id {...} 只为设置id的html元素应用这个样式,其他未设置id的相同html元素未受影响。 CSS 类选择器,类名第一个字符不能用数字。
.center {text-align: center}所有拥有 center 类的 HTML 元素中的文字均居中。
<div class="center">文字居中</div>
.类名 html元素 {...} 出现在类名的更大元素内部的html元素,应用这个样式。
html元素.类名 {...} 设置类名的html元素将应用这个样式;其他未设置类名的相同html元素未受影响。 CSS 属性选择器,不带有 class 或 id 的表单设置样式时可用属性选择器。IE6 及更低的版本不支持属性选择器。 [属性=值] {...} 只有设置了属性等于值才应用该样式。 [属性|=值] {...}只有设置了属性且含用指定值才应用该样式;适用于由连字符(-)分隔的属性值。 CSS 伪类:用于向某些选择器添加特殊的效果。 selector : pseudo-class {property: value}CSS 类也可与伪类搭配使用。
selector.class : pseudo-class {property: value} a:link {color: #FFDD00}
a:visited {color: #CCFF00}
a:hover {color: #CC00FF}
a:active {color: #00CCFF}
CSS 伪类(Pseudo-classes) :active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时,向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
:lang 向带有指定 lang 属性的元素添加样式。 CSS 伪元素:用于向某些选择器设置特殊效果。 selector:pseudo-element {property:value;}
CSS 类也可以与伪元素配合使用:
selector.class:pseudo-element {property:value;} 伪元素 :first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。 CSS2 媒介类型
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值