CSS基础学习（二）

最新推荐文章于 2024-07-02 11:41:37 发布

对不起该昵称已存在

最新推荐文章于 2024-07-02 11:41:37 发布

阅读量82

点赞数

分类专栏：自学

本文链接：https://blog.csdn.net/qq_43326818/article/details/88809184

版权

自学专栏收录该内容

12 篇文章 0 订阅

订阅专栏

CSS样式:

基础文字和字体样式化：
字体：颜色，通过color属性来指定，合法的颜色表示都可以。
字体种类：通过属性font-family来指定。同时还可以引入web字体，也就是非本地的字体，web字体可以提供更多样的文本，具体方法为：

@font-face{
font-family:"Bistream Vera Serif Bold";
src:url("http://devloper.mozilla.org/@api/deki/filed/2934/=VeraSeBd.tff");
}
//之后就可以在需要的地方使用下载的字体，例如：
p{
font-family:"Bistream Vera Serif Bold";
}

字体大小：通过属性font-size设定，常用的单位是px和em。
字体样式：font-style(italic,nomal,oblique)。
字体粗细：font-weight,有bold,normal。
文本转换：text-transform(none,uppercase,lowercase,capitalize,full-width)
文本装饰：text-decoration(none,underline,overline,line-through)。

文本布局：
文本对齐：text-align（left，right，center）。
行高：line-height（行高=上间距+文字大小+下间距），单位是px。

font简写：
语法是：

选择器{font-style font-weight font-size/line-height font-family}//顺序不能颠倒

1. 样式化列表:
2. 1. 列表特定样式：list-style-type:disc（实心圆）circle（空心圆）square（实心方块）decimal（阿拉伯数字）lower-alpha（小写字母）upper-alpha（大写字母）。项目符号的位置：通过list-style-position来指定，其值有outside和inside，outside就是看标号和li不是一体，inside就是标号和li的内容是一体的。使用自定义的项目图片：通过background属性来指定： background-color：背景颜色 background-position：背景图片的位置 background-size：背景图片的尺寸。 background-repeat：如何重复背景图像。 background-image：插入背景图片,url(相对路径或者绝对路径)。

样式化链接：
默认的链接颜色是蓝色，带下划线的，我们可以通过color属性和text-decoration来设置下划线。
1. 综合上述的知识写了一个非常丑的页面：（弄混了好多，模块的类型应该写在CSS文件里面的，不是在HTML文件里面）

//htmll文件
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <form>
            <fieldset class="one">
                <legend>我的</legend>
                <img src="头像.jpg" title="草壁利人He" width="100px" height="100px">
                <span class="one" dispaly="block">草壁利人人He</span>
                <br>
                <br>
                <span class="one" display="inline-block">粉丝0 |</span>
                <span class="one" display="inline-block">关注0 |</span>
                <span class="one" display="inline-block">收到赞0</span>
            </fieldset>
            </form>
            <span class="two" display="inline-block" >已签到1天</span>
            <span class="two" display="inline-block" >消息</span>
            <span class="two" display="inline-block" >章鱼烧11</span>
            <br>
            <br>
            <span class="two" display="inline-block">收藏</span>
            <span class="two" display="inline-block">游戏中心</span>
            <span class="two" display="inline-block">关注的小组</span>
            <hr>
            <span class="three" dispaly="block">我的会员</span>
            <a class="one" href="https://www.aizhuizui.cn" dispaly="block">下载App开通会员</a>
            <br>
            <span class="two" display="block">购买章鱼烧</span>
            <a href="#">></a>
            <hr>
            <span class="two" display="block">充值记录</span>
            <a class="two" href="#">></a>
            <hr>
            <span class="two" display="block">消费记录</span>
            <a class="two" href="#">></a>
            <hr>
            <span class="two" span="block">下载</span>
            <a class="two" href="#">></a>
            <hr>
            <form>
            <fieldset class="two">
                <legend>最近阅读</legend>
                <img src="柯南.png" width=150px height="100px" title="名侦探柯南">
                <img src="同.jpeg" width="200px" height="100px" title="同级生"
            </fieldset>
            </form>
    </body>
</html>


//CSS文件
fieldset.one{
    background-color:beige;
    width:300px;
    height:200px;
}
fieldset.two{
    background-color:beige;
    width:400px;
    height:150px;
}
span.one{
    background-color:palegoldenrod;
    display:inline-block;
    width:100px;
    height:20p;
    font-style:normal;
    font-weight:normal;
    font-size:10px;
    font-family:"微软雅黑"；
}
span.two{
    background-color:palegoldenrod;
    height:20px;
    width:100px;
    display:inline-block;
}

span.three{
    background-color:gold;
    height:20px;
    width:100px;
    display:inline-block;
}
a{
    text-decoration:none;
    color:gold;
}
body{
    background-color:beige;
}

丑陋的效果是这样：
（好想再看一遍《同级生》）

在这里插入图片描述

对不起该昵称已存在

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础学习（二）

CSS样式:基础文字和字体样式化样式化列表样式化链接基础文字和字体样式化：字体：颜色，通过color属性来指定，合法的颜色表示都可以。字体种类：通过属性font-family来指定。同时还可以引入web字体，也就是非本地的字体，web字体可以提供更多样的文本，具体方法为：@font-face{font-family:"Bistream Vera Serif Bold";sr...
复制链接

扫一扫