前端学习二（css样式）

最新推荐文章于 2024-05-13 00:45:01 发布

李新宇y

最新推荐文章于 2024-05-13 00:45:01 发布

阅读量468

点赞数 1

分类专栏：前端学习文章标签：前端入门笔记 css

本文链接：https://blog.csdn.net/qq_40272342/article/details/81462386

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css：层叠式样式表，用于控制web网页的外观
css三种使用方式

直接在标签内增添样式
在head中的style内增添样式
在另一文件中增添样式用link连接

<style type="text/css">
</style>

若css样式设置在另一个文档要联系不同文件，增添一个link标签

<link rel="stylesheet" type="text/css" herf="">

css语法：学会如何去关联；学会如何去修改样式。

选择器

id选择器 id= “budy” #budy 网页中有唯一的元素需要修饰
类选择器 class = “” .有多个元素具有同样的样式
标签选择器直接通过标签名称选择

修饰

具体的css规则

颜色表示方式（通常使用十六进制）

rgb模式红绿蓝三色调比列

color ：rgb（200，20，5）； //取值范围0——255

直接写颜色的名称

color:gray;

十六进制

color：#9f0000；

rgba

rgba（255，0，0，0.5）；//红 绿 蓝 透明度（取值范围0-1，完全透明-不透明）

边框相关属性
width 宽
height 高
border-width 边框宽度
border-style 边框样式
border-color 边框颜色
以上三条可简写为一条border：宽度样式颜色
单位： px ，像素
可以只设置某一边
border-bottom（left/right/top）
边框圆角
border-radius
设置圆形

width：100px；
height：100px；
radius：50%；

背景相关属性
background -color 背景颜色
background-image 背景图片
background-repeat 设置背景图片是否重复
no-repeat 表示不重复 repeat-x 沿x轴方向重复 repeat-y 沿y轴方向重复
background-position ：距左边框距离距右边框距离；

以上所有可以简写为一条

background：blue url（"地址"） no-repeat 10px 20px；

字体相关属性
font-size 字体大小
color 字体颜色
font-weight：blod; 字体加粗
font-family 定义字体类型

文本相关属性
text -align 设置水平居中：center居中，left左对齐 right 右对齐
line-hejght：后放入所选内容的高度，实现垂直居中
text-indent 首行缩进
letter-spacing 单字间距

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>Just for fun</title>
        <style type="text/css">
            p{
                width: 800px;
                height: 800px;
                border:2px solid gray;
                background: no-repeat url(../img/素材.jpg);
                font-size: 20px;
                color:black;
                font-weight: bold;
                font-family:"楷体";
                text-indent: 40px;
                line-height: 30px;
            }
        </style>
    </head>
    <body>
        <p>

            我们必须先有哭，才有欢笑，有悲哀而后有醒觉，有醒觉而后有哲学的欢笑，再加上和善与宽容
        </p>


</body></html>

李新宇y

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习二（css样式）

css：层叠式样式表，用于控制web网页的外观 css三种使用方式直接在标签内增添样式在head中的style内增添样式在另一文件中增添样式用link连接&lt;style type="text/css"&gt;&lt;/style&gt;若css样式设置在另一个文档要联系不同文件，增添一个link标签&lt;link rel="stylesheet" type...
复制链接

扫一扫