CSS的学习笔记（2022/4/16）

最新推荐文章于 2024-10-06 23:37:55 发布

weixin_43904258

最新推荐文章于 2024-10-06 23:37:55 发布

阅读量689

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_43904258/article/details/124214376

版权

一、CSS基础概念

css样式：文字样式和盒模型的样式

css的另一重要的特性就是辅助页面布局，完成HTML不能完成的功能，比如并排显示，比如精确定位显示

前端三层

结构层：HTML从语义的角度进行对网页结构的搭建

样式层：CSS作用是从美观的角度讲修饰页面样式

交互层：JavaScript作用从交互的角度讲描述页面的行为

二、css常用的样式属性

1.由html的k='v'变为属性值k：v

文字三属性：color，font-size，font-family

color：在标签中设置属性，可以在标签中输入

    <p style="color:blue">

也可在color冒号后使用颜色的十六进制表示法

font-size：设置字号大小

常用的是以px为单位的数字值

    <p  style="font-size: 90px;">

font-family：字体

属性值：必须用双引号包裹，属性值可以有多个，使用逗号分隔开

中文字体常用属性值：微软雅黑，宋体

英文字体常用属性值：Arial consolas

实际的字体属性是根据设计图设置

如果使用多个字体，使用逗号分隔开，如果浏览器识别不了，就会识别下一个字体；中英文会分别加载

  <p  style="font-family: 宋体;" >

2.CSS的盒子属性

width：

height：

都是以px为单位的数值

background-color：

和color一样分为单词和颜色值表示法

    <div style="width: 100px;height: 100px;background-color: antiquewhite;">

三、CSS样式表的引入方法

1.行内式样式表

引入位置：在标签的style属性中，等号后的引号内属性css样式，多个属性用分号分隔

2. 内嵌式样式表

基本语法：在head标签内部，title标签的下面

在一个style标签中写入参数

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        div
        {
            color: aquamarine;font-size: 50px
        
        }
    </style>
</head>
<body>
    <div>
        文字
    </div>
</body>
</html>

3.外链式样式表

在head标签内，title标签下，使用link标签，在herf中引入。

herf值：文件地址

rel属性值是stylesheet，目的是引入样式表

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <link rel="stylesheet" href="1.css">
</head>
<body>
    <div>
        文字
    </div>
</body>
</html>

----------------------------------------
1.css
div{
    color: bisque;
    font-size: 50px;
}

css文件内部不需要写任何的标签，直接属性css选择器和代码，因为css文件不允许书写HTML骨架

4.导入式样式表

导入式必须写在style属性的最开始处

style中使用import引用

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
    @import url(1.css)
<head>

样式表的名称	权重	优点	缺点
行内式	1	权重高，样式设置更精确	标签显得过于笨重和冗余
内嵌式	2（根据书写位置决定）	能够将css样式和骨架进行分离，可以进行批量属性的修改	样式和骨架没有进行完全分离，多个html文件不能使用同一套css代码
外链式	2（根据书写位置决定）
导入式	最低