CSS层叠样式表初学

最新推荐文章于 2023-09-10 14:38:58 发布

Peakednes

最新推荐文章于 2023-09-10 14:38:58 发布

阅读量230

点赞数

分类专栏： HTML 测试开发学习第一阶段文章标签： html css

本文链接：https://blog.csdn.net/Peakednes/article/details/106388879

版权

测试开发学习第一阶段同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

CSS简介

1.CSS：cascading style sheets-层叠样式表
2.专门负责对网页的美化
3.有三种使用方式（可以单用，可以混用）

DIV

可定义文档中的分区或节（division/section）。

标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记

，那么该标签的作用会变得更加有效。

优先级·判定特性

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

一：样式表种类

1、文档内嵌样式表：

页面head标签中添加style标签，标签里专门写css代码（推荐）

<h1 style="width: 500px;height:250px;background-color: red;">bat</h1>

2、元素内嵌样式表

h2{
    background-color: yellow;
}
<h1></h1>

3、外部样式表：

通过head标签中添加link标签来引入外部css文件

<link rel="stylesheet" type="text/css" href="./样式表.css">

优先级别

1.网站主页一般使用主页内嵌样式表
2.其余页面使用外部样式表
3除元素内嵌样式表Max 文档内嵌、外部链接在同一个文件头部，

谁离相应的代码近，谁的优先级高

二：选择器

背景颜色background-color
字体颜色color

1.标签选择器

<style type="text/css"></style >中 
p{
}
<p></p>

选择相应的属性值设置，是固定的

2.ID选择器

不能出现相同ID 有静态和动态ID

#值， id=”值”

#这个值是随意但唯一的
属性后面 id=”这个值是随意但唯一的”

3.类选择

<style type="text/css"></style>中 .a  //.值

<h1 class=”a”>   //class=”值”

4.组合选择器


·通用选择器
它匹配所有可用元素
*{margin:0;
padding:0;
}

·包含选择器
style中p1 p1-a p1-b设置不同的选项 class=p1 就是直接使用P1后面的全部属性
/*定义类样式*/
.div1{
    font-size:14px;
    color:#FF0000;
    }/*定义类样式下的标题元素*/
.div1 h1{
    color:#FF00FF;
    }/*定义类样式下的span元素*/
.div1 span{
    color:#0000FF;}</style></head>
<body><div class="div1">



·子选择器
只有儿子类会被选中
.food>li{border:1px solid red;}
 <h1>食物</h1>
 <ul class="food">
 <li>水果<li>
</ul>

·相邻选择器
h1 + p {margin-top:50px;}
h1
p

·分组选择器
.class1{
    color:red;
    }
.class2{
    color:blue;
    }
    /*共同样式*/
.class1,class2{
    font-size:13px;
    text-decoration:underline;
    }

5.伪类选择器

（1）静态伪类：只能用于超链接的样式。如下：
:link 超链接点击之前
:visited 链接被访问过之后
PS：以上两种样式，只能用于超链接。
（2）动态伪类：针对所有标签都适用的样式。如下：
:hover “悬停”：鼠标放到标签上的时候
:active “激活”：鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

超链接样式

/*超链接正常显示的时候的样式*/
a:link{
    color: red;
}
/* 鼠标悬停时样式 */
a:hover{
    color: #008000;
}
/* 鼠标点击后的样式 */
a:visited{
    color: gray;
}
/* 鼠标点击时不释放的样式 */
a:active{
    color: aquamarine;
}

<a href="http://www.baidu.com/" >下一度百</a>

<a href="http://www.baidu.com/" target="_blank">下一度百</a>

三：常用文本css属性

/* 字体颜色 */
color: aqua;

/* 文本对齐方式 */
text-align: left;

/* 字体大小 */
font-size: 20px;

/*或者数字    设置 文本粗细*/
font-weight: bold

/* 背景颜色 */
background-color: black;

/* 字体类型 */
font-family: "微软雅黑";

/* 设置字体风格 */
font-style: italic;

<p>字在这块显示</p>

四：常用容器类css属性

<style type="text/css">
    #cxkzs{
        width:300px;/*设置 HTML元素的宽度*/
        height:300px;/*设置 HTML元素的高度*/
        border:10px solid red/*设置HTML元素的边框，包括大小，颜色和边框样式*/
        background-color: cyan; /*设置HTML元素的背景颜色*/
        background-image:url("")/*(“图片地址”);      设置HTML元素的 背景图像*/
        line-height: 20px;/*设置HTML元素的行高*/
        line-height: 20px;/*设置HTML元素的行高*/
        text-decoration:none;/*设置超链接的下划线的样式*/
        margin：0 auto;/*设置HTML元素和其他周围HTML元素之间的距离*/
    }

</style>


<table id="cxkzs">
    <tr>
        <td>CXKZS</td>
        <td>CXKZS</td>
        <td>CXKZS</td>
    </tr>
</table>

五：层叠特性

当利用css对同一个HTML元素的同一个css属性设置样式时，就会引发css的层叠特性。css会根据选择器的优先级来进行判定。

ss选择器优先级：
行内样式优先度高于id选择器；
Id选择器的优先度高于类别选择器；
类别选择器的优先度高于标记选择器；

选择器优先度相同的情况以书写顺序较后的样式为准；

六：CSS 盒子模型(Box Model)局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
盒子模型 ·Margin(外边距) - 清除边框外的区域，外边距是透明的。
·Border(边框) - 围绕在内边距和内容外的边框。
·Padding(内边距) - 清除内容周围的区域，内边距是透明的。
·Content(内容) - 盒子的内容，显示文本和图像。
为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的

<style type="text/css">
                .box1{
                    width: 200px;
                    height: 200px;
                    background-color: aquamarine;


                    /*边框
                    边框宽 颜色 样式
                    border-width: 10 px 20px 30px 40px 顺序是上 右 下 左
                    border-width:   10 px 20px 30px  3 个值的话 上 右 下 右
                    border-width:   10 px 20px 2个值 上 右  下  左
                     */

                    border-width:10px;
                    border-color: #3234 #9942 #008000;
                    border-style:solid;

                    margin: 0px;

                /*  内边距
                会使用内容区的背景颜色*/
                    padding:10px;
                }
                .box2{
                    width: 100%;
                    height: 100%;
                    background-color: #FFE4C4;
                }

    </style>
</head>
<body>
        <div class="box1">
                <div class="box2">
                    ：）
                </div>

        </div>

七：盒模型浮动

盒子模型属性
当需要灵活布局的时候，我们就要使用盒模型的另一个很重要的特性，也就是浮动。
浮动（本质是一个css属性：float ，值为left 或者right）

盒模型标签专属特性：使用浮动的元素可以和其他浮动元素显示在同一行，但遵循以下原则：
当宽度足够时，浏览器会尽可能用一行显示完所有使用浮动的元素。

如果宽度不足以一行容下所有浮动元素时，不能显示完的浮动元素会显示在下一行，依次类推，直到显示所有浮动元素。

如果浏览器一行不足以容下一个浮动元素时，那么浏览器下方会出现左滚动条，一行有一个浮动元素

Peakednes

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS层叠样式表初学

CSS层叠样式表CSS简介DIV优先级·判定特性一：样式表种类1、文档内嵌样式表：2、元素内嵌样式表3、外部样式表：优先级别二：选择器1.标签选择器2.ID选择器3.类选择4.组合选择器5.伪类选择器**超链接样式**三：常用文本css属性四：常用容器类css属性五：层叠特性六：CSS 盒子模型(Box Model)局时使用。七：盒模型浮动CSS简介1.CSS：cascading style sheets-层叠样式表2.专门负责对网页的美化3.有三种使用方式（可以单用，可以混用）DIV 可定义
复制链接

扫一扫

专栏目录