前端自学日记-day4

最新推荐文章于 2024-05-21 17:39:47 发布

隔壁海狸鼠

最新推荐文章于 2024-05-21 17:39:47 发布

阅读量114

点赞数

分类专栏：前端自学日记文章标签：前端 css

本文链接：https://blog.csdn.net/qq_43065990/article/details/128351629

版权

前端自学日记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前端自学日记

day4

内容总结：学习了CSS基本语法知识，基础选择器，相关属性，引入方式等。

1.学习进度更新

在这里插入图片描述

2.具体内容

2.1 CSS简介

2.1.1 html的局限
因为html只管文本的结构和内容，所以很丑。为了让它样式更多元，引入专注于样式的CSS。
2.1.2 CSS
CSS（层叠样式表）作为网页的美容师，也是一种标志语言，可以用来设置文本内容，图片外形，版面布局。
2.1.3 CSS语法规范
选择器 + {n条属性声明}
选择器：html标签，给谁改样式；
属性声明：属性以键值对的形式出现。
2.1.4 代码风格
(1)样式格式书写
包括紧凑格式和展开格式，开发常用展开格式

(2)样式大小写
小写形式

(3)空格规范
选择器和大括号中间一个空格，属性的前面冒号后面保留一个空格（p {color: pink;}）

2.2 CSS基础选择器

选择器用来选择标签的，css提供四种选择器，可以涵盖标签的多样化选择，以便对他们进行差异化设置。
在这里插入图片描述
PS：类选择器和id选择器的区别
类选择器就好比人名，可以重复也可以调用多次；id选择器好比身份证号是唯一的，只有自己可以用。其实结合着python定义类就比较好理解了，类选择器作为父类可以被多个子类继承属性。
类选择器注意事项：

类名是自定义的，不能用特殊标签起名；
名字太长可以用-隔开；
名字要有意义，不要用纯数字，尽量用英文，拼音也行；
开发时的命名规则：Web前端开发规范手册；
可以给一个标签指定多个类名 $< d i v$ $c l a ss = " 类名 1 类名 2" >$

2.3 CSS字体属性

在这里插入图片描述
注意事项：

字号：不同浏览器显示字号大小不一致，级联给一个明确值的大小，不要默认大小；
可以给body指定整个页面文字大小；
标题标签比较特殊，需要单独指定大小；
复合属性：字体属性常用复合属性，更简洁。

2.4 CSS文本属性

在这里插入图片描述

注意事项：

装饰文本中属性可以设置成none去掉链接中的下划线。

2.5 CSS的引入方式

按照CSS书写位置的不同可以分为一下三种样式表：
在这里插入图片描述
外部样式表核心操作：

将css代码单独写到.css文件中，这个文件中只有样式没有标签；
在.html文件中，使用<link rel="stylesheet" href="css文件路径">引入css文件。

表格作业展示及代码

CSS基础选择器

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器</title>
    <style>
        /* 标签选择器 */
        div {
            font-size: 20px;
            color: green;
        }
        /* 类选择器 */
        .paragraph {
            text-indent: 2em;
            line-height: 26px;
            font-weight: 700;

        }
        /* id选择器 */
        #private {
            font-style: italic;
            font-size: 25px;
            color: pink;
            font-family:Arial, Helvetica, sans-serif;
        }
        /* 通配符 */
        * {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <!-- 标签选择器 -->
    <div>标签选择器主要对一类标签进行定义，比如我们对所有div标签都设置为字号大小为20px，字体颜色设为绿色</div>
    <!-- 类选择器 -->
    <p class="paragraph">类选择器定义相关的属性，标签调用类生效，比如我们的p标签对类paragraph调用，首行缩进2字节，段落设置为行间距为20，字体粗细设为700。</p>
    <!-- id选择器 -->
    <p id="private">id选择器是对某个标签进行定制化操作，一个id选择器只能在一个文档中使用一次。比如对于id为privat的p段落，设置为字体设置为斜体，字号大小为25px，字体颜色为粉色，字体样式为微软雅黑</p>
    <!-- 通配符 -->
    <p>通配符对所有标签有效，设置所有文字都有下划线</p>
</body>

CSS字体属性

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性</title>
    <style>
        /* 字体 */
        .ziti {
            font-family: 'Times New Roman', Times, serif;
        }
        /* 字号 */
        .zihao {
            font-size: 30px;
        }
        /* 字体粗细 */
        .cuxi {
            font-weight: normal;
        }
        /* 样式 */
        .yangshi {
            font-style: italic;
        }
        /* 复合属性 */
        .fuhe {
            font-family: 'Courier New', Courier, monospace;
            font-size: 30px;
            font-weight: normal;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="ziti">字体设置为time new</div>
    <div class="zihao">字号设置为30px</div>
    <div class="cuxi">字体粗细为normal</div>
    <div class="yangshi">字体样式设置为斜体</div>
    <div class="fuhe">复合属性中上面都有</div>
</body>

CSS文本属性

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本属性</title>
    <style>
        /* 文本颜色 */
        #color {
            color: purple;
        }
        /* 对齐文本 */
        #align {
            text-align: center;
        }
        /* 装饰文本 */
        #decorate {
            text-decoration: overline;
        }
        /* 文本缩进 */
        #indent {
            text-indent: 2em;
        }
        /* 行间距 */
        #height {
            line-height: 26px;
        }

    </style>
</head>
<body>
    <p id="color">用十六进制设置文本颜色为紫色，还可以使用预定义颜色、rgb值</p>
    <br>
    <p id="align">对齐文本包括left、right、center</p>
    <br>
    <p id="decorate">装饰文本包括underline、line-through、overline、none</p>
    <br>
    <p id="indent">文本缩进可以使用px单位和em，em是相对当前元素n个文字大小距离</p>
    <br>
    <p id="height">行间距包括上间距 文本高度和下间距的和</p>
</body>

CSS的引入方式

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS引入方式</title>
    <!-- 此方式为内部样式表 -->
    <style>
        p {
            font-size: large;
            color: blueviolet;
            text-align: center;
        }
    </style>
    <link  rel="stylesheet" href="out.css">
</head>
<body>
    <p>此方法为内部样式表展示结果，在属性style中标注属性，一般在html文件中的head部分定义，之后再body处引用</p>
    <div style="color: darkgreen; font-family: 'Courier New', Courier, monospace; text-decoration: underline;">此方法为行内样式表，结构和样式完全混在一起，但对于一些简单的样式修改非常方便</div>
    <a href="#" class="outcss">此链接的样式使用外部样式表设置的，完全结构和样式分离开，是开发中最为常用的一种方式</a>
</body>

  <!-- CSS文件 -->
  .outcss {
    color: aquamarine;
    text-align: center;
    font-style: italic;
    text-decoration:none
}

好几天没更新，一到每周组会就浑身难受，啥也看不进去。导师一发信息全身都是紧张戒备状态。考公无望，找工作学技术也不知道能不能坚持。距离毕业还有3月零13天。
——landing

隔壁海狸鼠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端自学日记-day4

前端自学日记 day4
复制链接

扫一扫

专栏目录

前端自学日记-day4

前端自学日记

day4

1.学习进度更新

2.具体内容

2.1 CSS简介

2.2 CSS基础选择器

2.3 CSS字体属性

2.4 CSS文本属性

2.5 CSS的引入方式

表格作业展示及代码

CSS基础选择器

CSS字体属性

CSS文本属性

CSS的引入方式

“相关推荐”对你有帮助么？