您的位置：首页 > Web前端 > CSS

快速了解CSS记录

2020-01-13 07:26 176 查看

使用菜鸟教程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

  • 点赞
  • 收藏
  • 分享
  • 文章举报
小白菜gzl 发布了8 篇原创文章 · 获赞 1 · 访问量 170 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航