css基础

css有以下优点:

提高页面浏览速度;

缩短改版时间,降低维护费用;

更好地控制页面布局;

实现表现和结构、内容相分离;

更方便搜索引擎的搜索。

将css样式加入到xhtml中有三种途径:

1.外部样式表

顾名思义是将 我们写好的样式放在一个单独的文件中,并在需要该样式的文档中引用;

引用代码如下:

2.嵌入式样式表

3.内联样式表

大多数的html标记都包含有一个style属性,允许指定在标记显示时的样式。

红色标题列

样式规则:由选择器 声明块 两大部分组成

h1{color:blue;}

其中h1为选择器  {}为声明块 color为属性 blue为值

属性和值用冒号隔开,声明用分号隔开

文档树

html文档是结构化,在层次关系上类似一个倒挂的树,数的每个层次与家族关系相似

选择器

1.元素选择器

em{color:blue;}

元素选择器选择匹配选择器的网页上的任何html元素,不考虑这些元素在文档树中的位置

2.类选择器

它用于选择某个class属性的任何html元素,不考虑这些元素在文档树中的位置

对样式文档进行格式化

.big{font-size:110%}

类选择器最强大的特点在于多个类可以应用于一个元素

虽然它很强大但不推荐使用,而选择用类来格式化

例如:

 <style type="text/css">
        h2 {
            text-align: center;
            color: red;
        }

        h3 {
            text-align: center;
            color: green;
        }

        .p {
            background-color: orange;
            color: blue;
            text-align: center;
            font-weight: bold;
        }

        .o {
            background-color: yellow;
            font-style: italic;
            text-align: center;
            color: blue
        }

        .l {
            background-color: pink;
            font-weight: bold;
            text-align: center;
            color: blue
        }
    style>
head>
<body>
    <h2>古诗两首h2>
    <h3>静夜思h3>
        <p class="p">李白p>
        <p class="o">床前明月光p>
        <p class="l">疑是地上霜p>
        <p style="background-color: black">举头望明月p>
        <p class="l">低头思故乡p>
    <h3>春晓h3>
        <p class="p">孟浩然p>
        <p class="o">春眠不觉晓p>
        <p class="l">处处闻啼鸟p>
        <p class="o">夜来风雨声p>
        <p class="l">花落知多少p>
设置元素内容的字体
设置字体名称font-family
设置字体倾斜程度 font-style
设置字重font-weight
设置字体大小font-size
设置元素内容的文本属性text-align
设置行高line-height
设置字间距letter-spacing
设置词间距word-spacing
设置元素内容的字体颜色与背景
background-color背景颜色
background-image背景图片用URL或none
background-reapt设置背景图片是否如何铺排
background-attachment设置背景图像是随对象内容滚动还是固定的(scroll默认/图像相对于显示屏铺排,fixed相对于上一级元素的区域铺排)
background-position 用于指定背景图片显示的位置
样式表的层叠
我们在同一元素的同一属性color上定义多条css规则,这种情况叫层叠,这时就要考虑优先级算法来确定
1.css规则的来源和重要性:
从小到大的顺序为
浏览器默认样式表
用户在浏览器中定义中的normal规则
开发人员定义的样式中的normal规则
开发人员中的样式中important规则
2.css规则的特殊性
特殊性值是一个4个整数组成的一个类似数组的值:abcd,其中a的权重最高以此类推
如果该规则是一条内联样式那么a=1,否则a=0
若选择器中出现的id选择器的数量就是b的值
若出现属性选择器或类选择器伪类选择器的数量总和就是d的值
通配符为0000
3.css规则在文档中出现的顺序
如果两条规则有相同的重要性和特殊性那出现在后的总是比出现在前的具有更高的优先级





你可能感兴趣的:(css基础)