css知识点记录

最新推荐文章于 2024-10-25 22:46:05 发布

最新推荐文章于 2024-10-25 22:46:05 发布 · 73 阅读

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 媒介类型