CSS样式开篇

来源：互联网发布：百度人工智能研发编辑：程序博客网时间：2024/06/10 20:01

CSS全称为：Cascading Style Sheets,层叠样式表，用于为html元素定义style。

html中定义样式有三种方法：

1、行样式表即在标签中使用style=" ";定义样式。如：

<p style="color:red; font-size: 30px; font-family: 隶书;background-color: #ccc; ">学而不思则罔，思而不学则殆。</p>

p标签的样式为：灰色背景，字体颜色为红色，大小30像素，隶书。

注意：样式的定义遵循层级就近原则；子元素不定义样式就会继承父类样式，定义就会覆盖父类样式。

<div style="color: blue;">    <p>我是div1的子元素，没有设置样式的话会继承div的样式</p>    <p style="color: red;">我是div1的子元素，设置了样式，就会覆盖掉div的样式        <span>            p标签中的子标签，没有设置样式，会继承p的样式，不会继承div的样式，遵循层级就近原则        </span>    </p></div>

2、嵌入样式表即在head标签中通过style标签设置。如：

接触嵌入样式表就涉及到选择器，css根据写法不同，有以下几种选择器：

html选择器,class选择器,id选择器,关联选择器,组合选择器和伪元素选择器。

<html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        p{color: red;}/*html选择器*/        p,h1{color: red;}/*组合选择器*/        .p1{color: blue;}/*class选择器*/        #p2{color: green; font-size: 20px}/*id选择器*/        p span{color: darkmagenta}/*关联选择器，只改变p下的span颜色*/    </style></head><body>    <p class="p1">段落1</p>    <p id="p2">段落2</p>    <p>段落3        <span>与p关联</span>    </p>    <p>段落4</p>    <h1>标题1        <span>与h1关联</span>    </h1></body></html>

效果如下：

注意：id要具有唯一性，不要定义多个相同的id，在js程序调用时，用于指定id,在实际开发中要唯一定义。class可以定义多个相同的。

伪元素选择器是针对标签不同的状态的选择器。

3、引入样式表，即css样式

html代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <!--此处因为css.css和html-style2在同一个目录下 可以href="css.css",否则要写绝对根目录-->    <link rel="stylesheet" href="css.css" type="text/css"></head><body><p>被设置了引入样式的段落</p></body></html>

css.css代码如下：

p{width: 500px; color: red; font-size: 30px; background-color: aqua; text-align: center}

css和html-style2在同一目录下。

特别注意：

1、三种样式的级别优先级行样式>嵌入样式>引入样式。

2、引入样式一般写在嵌入样式的上面。

3、符合后出现的先应用。

阅读全文

0 0