CSS Basic

最新推荐文章于 2024-05-18 09:45:04 发布

_一克拉的梦想_

最新推荐文章于 2024-05-18 09:45:04 发布

阅读量569

点赞数

分类专栏： CSS 复习笔记文章标签： css语法注释 css选择器 css引用 css优先级

本文链接：https://blog.csdn.net/u013960094/article/details/22819539

版权

复习笔记同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

CSS

22 篇文章 0 订阅

订阅专栏

What is CSS?

stands for Cascading Style Sheets （层叠样式表）
defines how to display HTML elements （定义如何显示HTML元素）.

HTML was never intended to contain tags for formatting a document, but to define the content of a document, HTML从来没有打算包含一些标签用于定义文档的格式。

CSS Syntax：

A CSS rule set consists of a selector (指向你希望样式化的HTML元素) and a declaration block (包含一个或多个由分号分隔开的声明). 每一个声明包含 a property name (性质名称) and a value (值), 并由冒号隔开.

Example:

p {color:red;text-align:center;}

Comments:

A CSS comment starts with /* and ends with*/.

A HTML comment start with

A JavaScript single line comments start with //.

And a JavaScript multiline comments start with /* and end with*/.

CSS Selectors

CSS selectors are used to "find" (or select) HTML elements :

CSS选择器用于查找或选择HTML元素，可以是以下几种：

1. element Selector : selects elements based on the element name.

2. id Selector: 针对一个特别的元素定义一个特别的样式. (如果你想要选择一个唯一的元素，那么确保 id 在页面中是唯一存在的。)

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

3. class Selector: uses the HTML class attribute. 使用该选择器用于一组元素。

.exClassSelector { text-align:center; color:red; }

To minimize the code, you can group selectors 选择器分组, separate each selector with a comma.

用逗号隔开、组合拥有相同CSS代码的HTML元素，以简化代码。

h1,h2,p { text-align:center; color:red; }

注意：id、class名字不要以 numer 数字开头。

Three Ways to Insert CSS

常见的三种引入 CSS 的方法：

1. External style sheet (外部样式表): 使用<link>元素，定义在页面<head>区域，样式保持在以 .css 为后缀的文件中。Is ideal when the style is applied to many pages. 注意： The type attribute is not necessary in HTML5

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

2. Internal style sheet (内部样式表): 使用 <style> 元素，定义在页面<head>区域, define a style for one HTML page.

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

3. Inline Styling (行内样式): 使用style attribute，针对一个HTML元素应用唯一的样式。小心使用，不然失去了样式表的优势（把内容与表现混合在一起了）

<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>

Cascading Order

CSS样式表层叠优先级。

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:

当我们对同一个HTML元素进行多次CSS样式定义，这些样式将层叠起来就像形成一个新的虚拟的样式表。层叠规则如下，数字越大优先级越高。

Browser default
External style sheet and Internal style sheet (in the head section)注意：外部样式表和内部样式表在头部书写的顺序也会影响优先级。
Inline style (inside an HTML element)

Tip：css文件中，对同一个HTML元素同时使用多个class时，class选择器写在越后面层叠优先级越高。

.a1{color:red;}
.a2{color:green;}
.a3{color:blue;}

<p class="a1 a2 a3">test</p>
<!--文字颜色最终为blue-->

_一克拉的梦想_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS Basic

What is CSS?CSS stands for Cascading Style Sheets （层叠样式表）define how to display HTML elements （定义如何显示HTML元素）. HTML was never intended to contain tags for formatting a document, but to define the
复制链接

扫一扫