前端基础笔记-CSS-01-css引入、基础选择器、字体样式

最新推荐文章于 2024-07-25 14:15:14 发布

今天也很想吃泡椒牛蛙

最新推荐文章于 2024-07-25 14:15:14 发布

阅读量360

点赞数

分类专栏：前端基础笔记--html&&css 文章标签： css html

本文链接：https://blog.csdn.net/mkx2723/article/details/107493985

版权

前端基础笔记--html&&css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

css引入的三种方式

行内式(内联)

直接在标签里写style属性的值即可，书写方便。缺点是结构与样式没有分离，每个标签的样式都要写一遍，非常麻烦。
例：

<body>
    <h1 style="color:red; ">文本内容</h1>
</body>

内部样式表(内嵌)

在head标签中写style标签，有固定的格式。这样简化了样式的写法，但还是没有做到结构与样式的完全分离。
在这里插入图片描述

外部样式表(外链式)

建立一个新的文件.css，样式全部都写在css文件里，然后在HTML文件中用link标签引用。这样就可以做到结构与样式完全分离。
在这里插入图片描述
文件列表：

在html文件中引用css：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/CSS" href="05.css"/>
</head>
<body>
    <h1>css样式</h1>
</body>
</html>

css基础选择器

1.标签选择器
不能使标签差异化，所有的同类标签都会是一种样式。

<style>
    标签名称 {
        属性1：属性值1;
        属性2：属性值2;
    }
</style>

2.类选择器
自己设置类名写出样式，要用的时候直接在标签里调用这个类名即可。如果一个标签要调用多个类名，那么改为如class="类名1 类名2"即可。

<style>
    .classname {
        color: red;
        
    }
</style>

<p class="classname">标签内容</p>

3.id选择器
与类选择器相似的用法，但是不同之处在于，在同一个页面内，不允许出现相同名字的id对象，但允许相同名字的class对象。id选择器多用于页面中具有唯一性的元素，在js中用到较多。

<style>
    #idname {
        color: red;
     
    }
</style>

<p id="idname">标签内容</p>

4.通配符选择器
能够应用到页面的所有标签中，但是会降低页面的响应速度。

* {属性1：属性值1；
   属性2：属性值2；
  }

css字体样式

基本操作

字体大小font-size
字体种类font-family，可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体，如果都没有，则以电脑默认的字体为准。

    <style>
        .red {
            color: red;
            font-size: 20px; 
            font-family: Arial, Helvetica, "微软雅黑";
        }
    </style>

注意中文的字体种类可能会在文件编码中出现错误，从而导致乱码。可以选择用英文来表示字体名称，也可以直接使用Unicode编码表示字体名称，比如微软雅黑：font-family: "\5FAE\8F6F\96C5\9ED1";
在这里插入图片描述

字体粗细font-weight，推荐用数字来表达粗细。
在这里插入图片描述

字体风格font-style
在这里插入图片描述
综合设置字体样式font

选择器 { font: font-style  font-weight  font-size/line-height  font-family;}

属性的顺序固定，默认值的可以省略，font-size和font-family必须要有

外观属性

在这里插入图片描述

案例

<!DOCTYPE html>
<html lang="en">
<head>
   
    <style>
        body {
            font-size: 16px;
        }

       .title {
           font-weight: 400;
           text-align: center;
       }

       .time {
           color: gray;
       }

       .href1 {
           color: red;
           text-decoration: underline;
       }

       .href2 {
           text-decoration: none;
       }

       .in {
           color: red;
       }

       .research {
           color: green;
           font-weight: 700;
       }
       
       .tip {
           text-align: center;
       }

       p {
           text-indent: 2em;
       }

       em {
           font-style: normal;
           color: blue;
       }
    </style>
</head>
<body>
    <h1 class="title">中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>
    <div class="tip">
        <span class="time">2017年07月16日20:11</span>
        <span class="href1">新浪体育 评论中大奖 （11人参与）</span>
        <a href="#" class="href2">收藏本文</a>
        <input type="text" value="请输入查询条件" name="in"/>
        <input type="button" value="搜索" name="research"/>
    </div>

    <hr>
    
    <p>
        新浪体育讯　7月16日是燕京啤酒<em>[微博]</em>中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。
    </p>
    <p>
        在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。
    </p>
    <p>
        据记者多方了解的情况，李虎<em>[微博]</em>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。
    </p>
    <p>
        这样的情况并没有影响到丽江嘉云昊队<em>[微博]</em>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。<strong>根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</strong>
    </p>
</body>
</html>

在这里插入图片描述

今天也很想吃泡椒牛蛙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础笔记-CSS-01-css引入、基础选择器、字体样式

目录css引入的三种方式行内式(内联)内部样式表(内嵌)外部样式表(外链式)css基础选择器css引入的三种方式行内式(内联)直接在标签里写style属性的值即可，书写方便。缺点是结构与样式没有分离，每个标签的样式都要写一遍，非常麻烦。例：<body> <h1 style="color:red; ">文本内容</h1></body>内部样式表(内嵌)在head标签中写style标签，有固定的格式。这样简化了样式的写法，但还是没有做到结
复制链接

扫一扫

专栏目录