CSS 入门基础

 

一、CSS 介绍什么是CSS

 

CSS 指的是层叠样式表（Cascading StyleSheet）。在网页制作时采用层叠样式表技术，

可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

 

CSS 的基础语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

h1{
   color:red;
   font-size:14px;
}

属性大于 1 个之后，属性之间用分号隔开。这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

 

css 高级语法

1.选择器的分组

h1，h2，h3，h4，h5，h6{
      color：red;
   }

2.继承

根据 CSS，子元素从父元素继承属性

body{
     color：green;
}

通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。

 

派生选择器

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

比方说，你希望列表中的 strong 元素变为红色，而不是通常的黑色，可以这样定义一个派生选择器：

li strong{
    color: red;
}
<p><strong>我是黑色，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
        <u1>
            <li><strong>我是红色。这是因为 strong 元素位于 li 元素内。</li>
        </u1>

 

 

id 选择器

1.id 选择器： id 选择器可以为标有 id 的 HTML 元素指定特定的样式 id 选择器以“#”来定义

2.id 选择器和派生选择器： 目前比较常用的方式是 id 选择器常常用于建立派生选择器

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link  href="MyCss.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <p id="pid">hello css<a href="www.shiyanlou.com">shiyanlou</a></p>
        <div id="divid">this is a div</div>

    </body>
</html>

#pid a{
    color:#00755f;
}
#divid {
    color: red;

MyCss.cs文件

 

类选择器

(1)在 CSS 中，类选择器以一个点号显示

.divclass {
    color: red;
}

下面的 html 代码中，div 元素含有 divclass 类，意味着它要遵守.divclass的规则。

<div class="divclass">
hello div
</div>

(2)和 id 一样，class 也可被用作派生选择器：

.pclass a{
    color: green;

 

属性选择器

对带有指定属性的 HTML 元素设置样式。

(1)下面的例子为带有 title 属性的所有元素设置样式：

<style>
[title] {color:red;}
</style>

属性和值选择器

<style>
[title=te]{
                color: red;
            }
</style>

 

posted on 2017-04-01 17:19  王守昌  阅读(214)  评论(0)  编辑  收藏  举报

导航