前端基础(零)CSS基础_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

我们知道，html文件主要携带内容，虽然html也可以进行布局相关的操作，但是当浏览器的默认渲染规则不能很好的将我们定义好的布局展示出来，可能会导致显示不统一的问题，所以就将内容和表现进行分离，由CSS专门负责变现，html负责携带内容，可以很好的解除耦合，方便扩展，例如，需要全局的更新界面布局，那么也只需要修改css。可以说，css极大的提高了工作效率。就有点类似于android开发中的style，只负责配置各种view相关的属性值，而xml声明就有些类似于html，只是声明ImageView代表一个特定的view，表现形式完全可以交给style去处理。但是，个人感觉由于css的选择器的存在，css要比android中的style高明许多。

CSS基础语法

看图

示例

body { font-family: Verdana, sans-serif; }

로그인 후 복사

body元素的所有文字的字体都是Verdana。

CSS默认有集成的属性，也就是说默认情况下body下的所有字元素都会继承body的属性，就像android布局，父控件的属性也会它所有的字控件一样，例如在根布局设置 backgroud="#eee" 那么，该界面的基础色就是 #eee , css也是这样的。

选择器

css的强大之处在于，选择器的可配置性，对于复杂的界面显示来说这点非常有用

选择器的分组

h1,h2,h3,h4,h5,h6 { color: green; }

로그인 후 복사

上面的代码表示，每个选择器都不相互产生影响，只是写在了一起而已。

派生选择器

派生选择器就是通过依据元素在其位置的上下文关系来定义样式，以达到使标记更加简洁的目的。

div p { font-style: italic; font-weight: normal; }

로그인 후 복사

在上面的例子中，只有 div 元素中的 p 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。当然，单独出现的div 和 p并不会受到影响。

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。以 # 来定义

示例

#red {color:red;}#green {color:green;}

로그인 후 복사

html这样写

<p id="red">这个段落是红色。</p><p id="green">这个段落是绿色。</p>

로그인 후 복사

但是要注意，同一个html文件中同一个id只能使用一次，具体的原因请看这里

类选择器

通过设置元素的 class 属性，可以为元素指定类名。与id不同的是，同一个class可以在同一个html文件中复用。以 . 来定义

示例

.center {text-align: center}

로그인 후 복사

html代码中这样用

<h1 id="This-heading-will-be-center-aligned">	This heading will be center-aligned</h1><p class="center">	This paragraph will also be center-aligned.</p>

로그인 후 복사

基于关系的选择器

CSS有多种基于元素关系的选择器。通过它们我们可以更精确的选择元素。常见的关系选择器

选择器	选择的元素
A E	任何是元素A的后代元素E (后代节点指A的子节点，子节点的子节点，以此类推)
A > E	任何元素A的子元素
E:first-child	任何元素的第一个子元素E
B + E	任何元素B的下一个兄弟元素E
B ~ E	B元素后面的拥有共同父元素的兄弟元素E

伪类选择器

CSS伪类（pseudo-class）是加在选择器后面的用来指定元素状态的关键字。

示例

a:link {color: #FF0000}		/* 未访问的链接 */a:visited {color: #00FF00}	/* 已访问的链接 */a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */a:active {color: #0000FF}	/* 选定的链接 */

로그인 후 복사

上面表示a链接的各种状态的表示。