文章标题

最新推荐文章于 2025-12-10 20:30:06 发布

原创最新推荐文章于 2025-12-10 20:30:06 发布 · 217 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

html笔记同时被 2 个专栏收录

1 篇文章

订阅专栏

css笔记

1 篇文章

订阅专栏

本文详细介绍了CSS的基本结构，包括背景颜色、文本颜色、字体大小及类型等属性设置方法，并讲解了内边距、外边距、边框等布局属性的应用技巧。此外还探讨了浮动、定位及对齐方式等内容。

一基本结构

对于整体框架

body{
    background-color:#ff0000/red;/*背景颜色拥有两种写法*/
    color:black;//设置文本颜色为黑色
    font-size:12px;//设置文字的大小
    font-family：“sans seif”;//设置文字的字体
}

背景里加图片

background-image：url(图片)；

padding 设置内边距属性

div{
  padding-top:30px;
  padding-right:50px;
  padding-botton:50px;
  padding-left:100px;
}

margin 设置外边距属性

div{
  margin-top:200px;
  margin-right:200px;
  margin-botton:50px;
  margin-left:250px;
}

border 设置边框属性

div{
  border-color:#ff0000;
  border-width:10px;
  border-style:solid;
}

内边距（padding）, 围绕着内容的空间（比如围绕段落的空间）
边框（border）, 紧接着内边距的实体线段
外边距(margin), 围绕元素外部的空间
- width (属于一个元素的可以定义这个页面的宽度保持不动)
- background-color, 元素内容和内边距之后的颜色
- color, 元素内容的颜色（通常是文本）

通配符

<style>
*{color：#000000；}//将页面中所有文字颜色设置为黑色
p{color:#0000ff;}//将所有p标签中文字的颜色设置为蓝色
p*{color:#ff0000;}//将所有p标签中的子标签文字设置为红色
</style>

类

定义在style标签中需要在类名前面加“ . ”号

调用类时需要在调用的标签里调用类名就可以。注意类的第二个词首字母要大写

<style>
    .myClass{
        color：#ff0000;
        }
</style>

<p class="myClass">内容</p>

选择符

元素(标签)选择符：指定所有指定的html元素

浮动

盒子都有position属性不设置其默认值为 static 不接受上下左右位置属性

position

relative 相对 可以设置top bottom left right 属性
这些属性是相对于其父类而言的 其值为绝对的left：20px；
为向左移动20px;
 且盒子不随浏览器变动


absolute 绝对的  可以设置top bottom left right 属性
其必需有一个父类定义了position属性 
当盒子都定义这个属性盒子会水平排版其属性值是相对的
：right：40px；为与right相距40px

fixed 固定位置 相对与浏览器窗口 
无论怎么滚动都处于窗口的固定位置 
可以设置top bottom left right

z-index

如果盒子重叠了 设置z-index属性可以确定盒子优先级
z-index：数字； 数字越大的优先级越大

float 浮动

浮动效果可以让盒子水平排列 其先提条件是不能超过父体的大小

Overflow 清除浮动

防止超出父类范围出现坍塌 需在父类中定义 overflow：auto;

对齐

vertical-align 垂直对齐

Flexbox

垂直居中
.类 {
height: 300px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}