CSS基础、盒子模型、选择器

最新推荐文章于 2024-08-09 10:42:44 发布

kkugaii

最新推荐文章于 2024-08-09 10:42:44 发布

阅读量443

点赞数

文章标签：前端 css3

本文链接：https://blog.csdn.net/kkugaii/article/details/124160238

版权

CSS基础

基本概念

1.概念

css是重叠样式表，用于定义网页的样式。主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。多重样式有不同的优先级，样式之间可以相互覆盖，层叠，共同决定页面最终样式。

2.作用

页面外观美化
布局
定位

3.发展史

CSS以设计、改变其HTML页面的样式而知名，并使用于Web和其他媒介，如XML文档中。1996年12月W3C推出了CSS规范的第一个版本CSS1.0，1998年W3C发布了CSS的第二个版本即CSS2.0,2001年5月W3C开始进行CSS3标准的制定，到目前为止该标准还没有最终定稿。

添加方式

行内式

行内式是用style标签将样式添加到标签内部，样式只对当前元素起作用。

格式如下：

<body>
    <p style="属性名1：属性值1;属性名2：属性值2;"></p>
</body>

内联式

内联式是用style标签样式添加到HTML文件的head标签中，样式只对当前页面起作用。

格式如下：

<head>
   <title>Document</title>
   <style>
       p{
           属性名1：属性值1;
           属性名2：属性值2;
       }
   </style>
</head>

外联式

外联式是一个单独文件，如果多个页面需要统一设置公共的样式，则应将样式定义在单独的样式文件中，并在相关的网页中引用这个文件。

常用样式

文本样式

1.字体

属性	属性值
字体大小 font-size	数字px
字体粗细 font-weight	normal/bold/纯数字
是否倾斜 font-style	normal/italic
字体 font-family	字体名称

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .one{
            font-size: 50px;
        }
        .two{
            font-weight: bold;
        }
        .three{
            font-style: italic;
        }
        .four{
            font-family: 宋体;
        }
    </style>
</head>
<body>
   <p class="one">用来测试字体大小</p>
   <p class="two">用来测试字体粗细</p>
   <p class="three">用来测试字体是否倾斜</p>
   <p class="four">用来测试字体</p>
</body>
</html>

代码结果：
在这里插入图片描述

2.文本

属性	属性值
文本缩进 text-indent	数字+px/数字+em
文本对齐 text-align	left/right/center
文本修饰 text-decoration	underline/line-through/overline/none
行高 line-height	数字+px/倍数

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .one{
            text-indent: 2em;
        }
        .two{
            text-align: center;
        }
        .three{
            font-style: italic;text-decoration: none;
        }
        .four{
            line-height: 3;
        }
    </style>
</head>
<body>
   <p class="one">用来测试文本缩进用来测试文本缩进用来测试文本缩进用来测试文本缩进用来测试文本缩进用来测试文本缩进用来测试文本缩进用来测试文本缩进用来测试文本缩进</p>
   <p class="two">用来测试字体粗细文本对齐</p>
   <p class="three"><a href="#">删除超链接的下划线</a></p>
   <p class="four">用来测试字体行高用来测试字体行高用来测试字体行高用来测试字体行高用来测试字体行高用来测试字体行高用来测试字体行高用来测试字体行高用来测试字体行高用来测试字体行高</p>
</body>
</html>

代码结果：
在这里插入图片描述

背景样式

属性	属性值
背景颜色 background-color	颜色值
背景图片 background-image	url‘图片路径’
背景平铺 background-repeat	repeat/no-repeat/repeat-x/repeat-y
背景位置 background-position	关键词/数字+px

举例如下：

<head>
    <title>Document</title>
    <style>
        body{
           background-image: url('./微信图片_20220414100425.jpg');
            background-repeat: no-repeat;
            background-position: 0 0;
            color: aliceblue;       }
    </style>
</head>
<body>
    <h1>用来测试背景</h1>
</body>

代码结果：
在这里插入图片描述

复合写法

复合写法可以使代码变得更加简洁

字体font

字体属性的复合写法：

font：font-style font-weight font-size/line-height font-family;

ps：顺序不可调换

背景background

背景图片的复合写法：

background : background-color background-image background-repeat background-attachment background-position;

ps：顺序可调换

盒子模型

概念

CSS盒模型本质上是一个盒子，封装周围的HTML元素，是用来设计和布局的。

在这里插入图片描述

content区域：上图中蓝色背景的部分，此部分主要用于盛放具体内容，可能是文本、其他块级元素等。
padding区域：上图中绿色背景的部分，此部分是内容区与边框的间隔区域。
border区域：上图中黄色背景的部分，此部分是一个元素较稳定部分的边界。
margin区域：上图中橙色背景的部分，此部分是border与其他元素的间隔区域。

组成

内容区域

1.以默认的content-box盒子进行页面布局

width/height:数字+px；

注：此时若添加边框或行内距会使盒子扩大。

2.以padding-box盒子进行页面布局

注：设置的width/height属性会包括内边距。

3.2.以border-box盒子进行页面布局

注：设置的width/height属性会包括边框和内边距。

边框

属性名	属性值
线条样式border-style	dotted/dashed/solid/double
线条宽度border-width	px/thin/medium/thick
线条颜色border-color	颜色值
方向设置border-方向	各属性值

内外边距

1.内边距
padding:数字+px；
也可以同时设置四个属性值
padding:数字+px 数字+px 数字+px 数字+px；
四个数字一次代表上右下左
2.外边距
属性：margin
属性值与内边距一样

选择器

选择器的作用：CSS选择器的作用是从HTML页面中找出特定的某类元素。

标签选择器

特点：能够选中所有该标签都生效css。
格式：
标签名{css属性1：属性值1；属性2：属性值2；...}
举例如下：

<head>
    <title>Document</title>
    <style>
       p{
           color: aliceblue;
       }
    </style>
</head>
<body>
    <p>用来测试标签选择器</p>
</body>

类选择器

特点：可以为元素对象定义单独或相同的样式，而且多个标记可以使用同一个类名，可以实现为不同类型的标记指定相同的样式。
格式;
.类名{css属性1：属性值1；属性2：属性值2；...}
举例如下：

<head>
    <title>Document</title>
    <style>
       .one{
           color: aliceblue;
       }
    </style>
</head>
<body>
    <p class="one">用来测试类名选择器</p>
</body>

id选择器

特点：元素的id值是唯一的，只能对应于文档中某一个具体的元素。
格式：
#id{css属性1：属性值1；属性2：属性值2；...}
举例如下：

<head>
    <title>Document</title>
    <style>
       #one{
           color: aliceblue;
       }
    </style>
</head>
<body>
    <p id="one">用来测试id选择器</p>
</body>

后代选择器

特点：

用来选择元素或元素组的所有后代元素。
把外层标签写在前面，内层标签写在后面，中间用空格分隔。
当标签发生嵌套时，内层标签就成为外层标签的后代。

格式：
选择器1 选择器2{css属性1：属性值1；属性2：属性值2；...}

子代选择器

特点：

子代选择器只选择父级元素的亲一代。
在父级元素的后面，加上一个大于号，表示这是亲一代，后面再写上子级元素即可。

格式：
选择器1>选择器2{css属性1：属性值1；属性2：属性值2；...}

并集选择器

特点：

并集选择器可以选择多组标签，同时针对他们的样式进行更改。
元素中间用英文逗号隔开，逗号是“和”的意思，通常用于集体声明。

格式：
选择器1，选择器2{css属性1：属性值1；属性2：属性值2；...}

交集选择器

特点：

交集选择器可以选中相同标签中有相同类名的部分。
由两个选择器构成，其中第一个为标签选择器，第二个为 class 选择器，两个选择器之间不能有空格。

格式：
标签.类名{css属性1：属性值1；属性2：属性值2；...}

总结

通过本周的预习，我掌握了css的基本语法和各种属性值以及盒子模型，现在可以比较熟练的为html网页内容设置背景、字体大小、字体颜色等，从而生成一个比之前更美观的网页。

kkugaii

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础、盒子模型、选择器

CSS基础、盒子模型、选择器CSS基础基本概念、语法格式添加方式常用样式复合写法盒子模型选择器标签选择器类选择器id选择器后代选择器子代选择器并集选择器交集选择器总结CSS基础基本概念、语法格式添加方式常用样式复合写法盒子模型选择器标签选择器类选择器id选择器后代选择器子代选择器并集选择器交集选择器总结...
复制链接

扫一扫