css层叠样式表盒子模型

最新推荐文章于 2023-08-02 11:26:10 发布

adsdsasada

最新推荐文章于 2023-08-02 11:26:10 发布

阅读量255

点赞数

文章标签： css

本文链接：https://blog.csdn.net/adsdsasada/article/details/110219915

版权

本文详细介绍了CSS（层叠样式表）的基础知识，包括行内样式、内部样式和外部样式的选择器类型，如.class、#id、通用选择器等。重点讨论了CSS的盒子模型，包括margin、border、padding等属性，以及如何控制边框和背景。同时，文章提到了CSS颜色的表示方法和显示隐藏元素的技巧。

摘要由CSDN通过智能技术生成

CSS

一、CSS是Cascading Style Sheet的简称，称为“层叠样式表”或者“级联样式表”，是一组格式设置规则，用于控制网页内容的外观，可将页面内容与表现形式分离。

二、1985年5月12日，W3C组织推出了CSS2,使得这项技术在世界范围内得到广泛的应用。

三、CSS3提供了非常多新途径去改善你的设计工作，且做了不少重要的变化。

优点

1、样式复用，有效的避免代码臃肿
2、方便网站的后期维护
3、对页面进行精准控制，实现精美、复杂的页面

基本语法

修改的样式：值；

根据书写位置分为

外部样式（也叫外联式）：将网页链接到外部样式表。
内部样式（也叫嵌入式）：在网页上创建嵌入的样式表。
行内样式（也叫内联式）：应用内嵌样式到各个网页元素。

行内样式

在指定标签中书写样式，仅在当前标签生效

<div style="border: solid; border-color: green;">
        <!-- 行内样式:书写在单个标签内并且只对当前标签产生作用的样式 -->
        <p>这是初始样例</p>
        <p style="background-color: pink;">这是样例</p>
        <p style="background-color: #ff00ff;font-size: 10px;">这是样例</p>
        <p style="font-size: 30px;border:double ; border-color: red;">这是样例</p>
</div>

内部样式

书写在当前页面内，对选择器选择的标签进行样式书写

<style>
/* 由选择器与样式组成 选择器{样式;样式;}*/
/* 可以使用这种方式为页面指定标签批量设置样式 */
p{
   
    color:red;
    background-color: black;
    /* 如果标签没有设置这个样式 那么都会自动设置 */
}
</style>

<!-- 使用<style>标签嵌入在HTML文档中，通常写在<head>与</head>之间这种方式方便在同页面中修改样式-->
    <div >
        <p>这是初始样例</p>
        <p>这是样例</p>
        <p>这是样例</p>
        <p>这是样例</p>
    </div>