快速了解CSS记录

mac2025-02-27  3

使用菜鸟教程CSS教程快速了解CSS小记录

基本语法

CSS 规则由两个主要的部分构成:选择器(CSS 中 id 选择器以 “#” 来定义:id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式;在 CSS 中,类选择器以一个点"."号显示:class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用,可以指定特定的HTML元素使用class。),以及一条或多条声明。

#para1 { text-align:center; color:red; } .center {text-align:center;} p.center {text-align:center;}

每条声明由一个属性和一个值组成。 属性(property)是希望设置的样式属性(style attribute)。每个属性有一个值。 属性和值被冒号分开。 CSS声明总是以分号(;)结束,声明总以大括号({})括起来 CSS注释以 “/*” 开始, 以 “*/” 结束

样式表

外部样式表 每个页面使用 link 标签链接到样式表。 link 标签在(文档的)头部。 外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

内部样式表 当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用

<head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>

内联样式表 优先级 (内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

CSS组合选择符

后代选择器(以空格分隔):选取某元素的后代元素 子元素选择器(以大于号分隔):只能选择作为某元素直接子元素的元素 相邻兄弟选择器(以加号分隔):选择紧接在另一元素后的元素,且二者有相同父元素 普通兄弟选择器(以破折号分隔):所有指定元素之后的相邻兄弟元素

伪类

伪类可以看作以选中元素为基准点,此元素的一些状态或属性。 CSS伪类是用来添加一些选择器的特殊效果。

CSS3

CSS响应式设计

盒子模型

https://www.runoob.com/css/css-boxmodel.html

最新回复(0)