初识css

一、id与class用法讲解

1、使用区别

id具有唯一性，在一个网页中同一个命名只能使用一次；

class命名的类可以在一个网页中使用无数次。

2、css中区别

id在css代码中是以“#”井号符号开头命名的类

class在css代码中是以“.”小写句号符号命名开头的类

二、id与class什么意思

id和class都可以在网页中任何标签内使用。一般比较重要的部分、比较特别的盒子使用id，而小局部不重要的或小结构使用class。id调用css中以“#”井号命名的样式选择器，class调用css中以“.”英文半角小写句号命名的样式选择器。

二、实例

<!-- 包含头部信息用于适应不同设备 -->

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 新 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="https://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>

二、优先级

所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

浏览器缺省设置
外部样式表（<link rel="stylesheet" type="text/css" href="mystyle.css" />）
内部样式表（位于 <head> 标签内部，
<style type="text/css"> hr {color: sienna;} </style>）

内联样式（在 HTML 元素内部，<p style="color: sienna; margin-left: 20px"> This is a paragraph）
用!important限定的定义是优先级最高的，如background-color: #154377!important;

使用 margin 属性来水平对齐

可通过将左和右外边距设置为 "auto"，来对齐块元素。

posted @ 2020-06-22 11:30  Joexc  阅读(124)  评论(0)    收藏  举报