CSS初学日常知识点-第一天

最新推荐文章于 2023-11-19 20:12:48 发布

反方向的发

最新推荐文章于 2023-11-19 20:12:48 发布

阅读量114

点赞数 1

分类专栏： html 文章标签： css html 前端

本文链接：https://blog.csdn.net/Gaoler7/article/details/123240166

版权

html 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一.CSS是什么？

CSS(Cascading Style Sheets)，层叠样式表

二.css引入方式

1.行内样式
直接在开始标签上加style属性来控制样式
例如：

<div style="color:red;">内容</div>

2.内嵌式
所有的样式都写到一个<style></style>内部，该标签放<head></head>内部
例如：

<style type="text/css">
     选择器{ 
        样式属性名 ：属性值 ; 
    }
</style>

3.外链式
所有的样式都写到一个单独的css文件里（文件后缀是 .css）,通过在<head></head>内部用<link rel="stylesheet" href="css文件路径">来引入该css文件

<link rel="stylesheet" href="css文件路径">

4.导入式
@import url("css文件")；
或
@import "css文件"；

优先级：谁离标签近，谁的优先级高

三.选择器

1.标签选择器权重 1
标签名{
样式属性名：属性值；
}

        p {
            font-size: 20px;
            color: rgb(97, 200, 248);
            font-weight: bold;
        }

2.类选择器权重 10
.类名{
样式属性名：属性值；
}

需要在标签后加 class=" "

        .v5 {
            font-size: 14px;
            font-style: italic;
        }

3.ID 选择器权重 100
#ID值{
样式属性名：属性值；
}

需要在标签后加 iD=" "

    #top{
      font-size: 20px;
			font-family: "宋体";
			color: #00BFFF;
    }

4.包含选择器权重相加
选择器E 选择器F{
样式属性名 : 属性值 ;

}

        span a {
            text-decoration: none;
            color: rgb(49, 126, 243);
        }

四.字体相关样式

1.font-size 字体大小单位px,em

2.font-family 字体系列
设置多个字体时，多个字体间用逗号隔开
如果设置的字体名字里有空格的，用引号引起来

3. font-style 字体风格
   normal 正常不倾斜
   italic 斜体
   oblique 倾斜

4.font-weight 字体粗细
   normal 正常不加粗
   bold 粗体
   bolder 加粗
   100-900 9个层次数值越大，字体越粗
   lighter 细体

5.line-height 行高
单位 px
若无单位表示倍数

五.字体样式缩写

font : font-style值 font-weight值 font-size值 / line-height值 font-family值 ;

六.link和@import的区别：

1、从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2、加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3、兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

七.src和href的区别

href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系

src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。