微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css的基础小知识

css的选择器

1、id选择器,给标签添加唯一id,在css中用#id选择

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

2、class类选择器,类选择器以一个点 . 号显示

.center {text-align:center;}

3、标签选择器,表示该标签下所有的元素都起作用

p{text-align:center;}

4、标签+class选择器,表示对某个标签下使用该class样式的元素起作用

p.center{
	text-align:center;
}

注:class和id的名称一个不能以数字开头,否则浏览器不识别

css的三种样式的引入

1、外部样式,即从外部的css样式引入。

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

2、内部样式,即写在一个页面的head标签

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

3、内联样式,即直接在某个标签里面写着

<p style="color:sienna;margin-left:20px">这是一个段落</p>

多重样式优先级:如果在外部样式、内部样式、内联样式都引入css的话,如果定义的样式重复了(例如,都定义了color属性)那么起作用的顺序是:内联>内部>外部>浏览器认。如果定义的样式没有重复,那么久同时叠加起作用

css优先级高低排序:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器属性

css的盒子模型

在这里插入图片描述

原文地址:https://www.jb51.cc/wenti/3282987.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐