CSS基础---CSS样式

最新推荐文章于 2022-06-13 03:33:43 发布

We_jia

最新推荐文章于 2022-06-13 03:33:43 发布

阅读量256

点赞数

分类专栏： HTML+CSS 文章标签：样式写法权重俩种定位

本文链接：https://blog.csdn.net/We_jia/article/details/83961779

版权

HTML+CSS 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

CSS概述

Cascading Style Sheets 叠层样式表
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS的样式

行内样式

<div style="width:200px;height:300px;border:1px solid "></div>

内嵌样式

写在head里

<head>
    <style type="text/css">    定义css样式

    </style>
</head>

示例

<head>
    <style type="text/css">  
        /*1.class类名选择器*/  
             .block {
            width: 500px;
            height: 500px;
            background: deeppink;
            }

        /*2.id选择器*/
        #di {
            width: 100px;
            height: 100px;
            background: orange;
        }
        /*3.属性选择器*/
        div[class="b"][id="bb"]{
            width: 300px;
            height: 500px;
            background: black;}
       /*4.子父元素选择器*/
        #ulmenu{
            border: 1px solid silver;
            list-style: none;

        }
        #ulmenu li{
            color: red;
        }
    </style>
</head>
<body>
        <div class="block"></div>
        <div id="di"></div>
        <div class="b" id="bb"></div>
        <ul id="ulmenu" >
            <li>1
                <ul>
                    <li>2</li>
                    <li>2</li>
                    <li>2</li>
                    <li>2</li>
                </ul>
           </li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
</ul>

外部样式

写在head里

<head>

      <link rel="stylesheet "  href="index.css ">

</head>

示例：

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

<body>
        <div id="b_3"></div>
        <div id="centerBlock" style="width:800px"></div>
</body>

/*index.css 文件内的代码：*/

#b_3{
    width: 200px;
    height: 200px;
    border: 1px solid red;

}
#centerBlock{
    border: 1px solid green;
    height: 400px;
}

三种写法的特点

行内样式：作用范围仅限于当前标签，范围小，结构表现混在一起。
内嵌样式：样式只作用于当前文件，没有真正实现结构分离。
外部样式：作用范围是当前站点，谁调用谁生效，范围广，真正实现结构样式相分离。

相对定位

通常情况下，元素的position属性的值默认static，也就是说没有定位。无法给元素设置top，bottom，left，right，Z-index属性。

格式 position：relative；
设置相对定位以后，元素相对于它在文档流中位置的起始点进行移动
元素可以设置left等属性，在偏移以后，仍占据着未偏移前的空间
该元素的偏移不会影响其他元素的位置，如果有重叠的部分，它会重叠在其他元素之上（浮起来），而不是挤开。可以用Z-index属性设置堆叠顺序。

绝对定位

格式 position：absolute；
元素可设置left等属性，在偏移后不占据原来的空间
绝对定位的元素需要一个参照物，参照父元素（逐渐向上），若无父元素没有定位，则会相对于文档body来定位。

We_jia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS基础---CSS样式

CSS概述Cascading Style Sheets 叠层样式表随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有...
复制链接

扫一扫