小白的CSS探索之路

最新推荐文章于 2024-10-15 22:21:38 发布

Mirai1124

最新推荐文章于 2024-10-15 22:21:38 发布

阅读量105

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/m0_50869511/article/details/109226345

版权

以下示HTML代码为例：

<p>段落<p>

如果想使网页展示中的“段落”字样变红，调用如下CSS代码：

p{
    color:red;
 }

p：selector 选择器
color：property
red：value
所以，上述CSS代码的意思是：选择p tag，指定其color属性，将它的颜色变为红色。最后必须用分号！

添加CSS的三种方式

CSS选择器

示例：

<p class="paragraph" id="para1">段落</p>

方法1-直接引用：

p{
   color:red;
}

方法2-通过class（类）选择：

.paragraph{
     color:red;
}

方法3-通过id选择：

#para1{
    color:red;
}

class与id的区别：
id是HTML文件中唯一的那个，class可以相同。
id和class都不要用数字开头！
Tip：
在HTML中，.class名+tab快捷生成代码

        <div class="mingzi"></div>

#id名+tab快捷生成代码

        <div id="mingzi"></div>

字体样式：
在这里插入图片描述
font-family：优先级1，优先级2，…；
sans-serif：没笔锋
serif：有笔锋
字体加“”的原因：字体之间有空格
monospace：等宽字体

font-size：16px（一般）
font-weight：bold（加粗）

代码1：
font-family:Arial,Helvetica,sans-serif;
font-size:16px;
font-weight:normal;
代码2：
font:normal 16px Arial,Helvetica,sans-serif;

代码1=代码2
在程序从上往下运行过程中，代码2会覆盖代码1.

text-decoration:underline; //下划线
text-transform:uppercase; //全变大写字母
letter-spacing:1em; //字间距
word-spacing:2em; //词间距
line-height:1.5em; //行间距

盒子模型：
——外边距——
margin：上右下左； //顺时针指定
margin：上左右一致下；
margin：上下左右；
——内边距——
以上margin变padding
——边框——
border:5px blue solid;

定位：
static-静态定位
relative-相对定位
absolute-绝对定位
fixed-固定定位
sticky

position：absolute;
top:30px;
left:30px;

完全处于浮动状态，原来的位置不会保留。

position：relative;
top:30px;
left:30px;

根据偏移前的位置偏移。

position：fixed;
right:0;
bottom:30px;

固定在页面右下角不动（小广告弹窗就是这样）

关注