对前端不离不弃的5day-css开始啦

最新推荐文章于 2024-11-04 23:25:00 发布

好好学前端的欣欣同学

最新推荐文章于 2024-11-04 23:25:00 发布

阅读量159

点赞数

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

本文链接：https://blog.csdn.net/weixin_59418570/article/details/129194180

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.css介绍

1.1概念

cascading style sheets 层叠样式表级联样式表简称样式表

1.2作用

写网页样式实现了内容与表现的分离

提高了代码的重用性和维护性（重用性-重复利用）

1.3 文件后缀 .css

1.4

css代码由浏览器从上往下从左往右解析执行

1.5 语法

选择器{

属性：属性值；【也称键值对】

属性：属性值；

属性：属性值；

}

选择器：选中要写样式的元素注意：最后一个键值对的分号可以省略

1.6 css属性

width:200px;

height:200px;

background-color:#fff;

color:pink;

1.7 css样式特点

1)继承性

子元素可以继承祖先元素的样式

2)层叠性

同一个元素可以多次设置同一个样式

3)优先级

当样式冲突时，优先级高的样式生效当优先级相同时，后写的样式生效

1.8css注释

/*这是注释*/

2.html中引入css的方式

2.1行内样式 / 内联样式 --只对当前元素生效 eg:

<div style="width: 200px; height: 200px; background-color: pink"></div>

缺点：重用性低不利于后期维护

2.2内部样式 --只对当前页面生效

结构:(通过上style标签推荐写在head中)

<head>

<style>

选择器{

属性:属性值;

属性:属性值;

属性:属性值;

}

</style>

</head>

例子：

  <div class="box"></div>

      <style>

        .box {

          width: 200px;

          height: 200px;

          background-color: pink;

        }

      </style>

2.3外部样式--应用于多个页面

步骤:

1)新建.css文件

2)在html文件中通过link标签引入css 结构：

  <head >

  <!-- 告诉浏览器link标签引用的文件类型<link rel="stylesheet" href=""> -->

  <link rel="stylesheet" href="xxx.css" />

  </head>

优点：提高了代码的重用性和维护性一个html文件可以引用多个css文件

2.4 优先级：

行内样式>内部样式（外部样式）

注意：内部样式和外部样式优先级一样，写在后面的生效

【src和href的区别】

共同点: 都是路径

不同点: src{img /video } 都是用于替换当前元素

href{a/link} 用于在当前文档和引用的资源之间建立联系

接下来就是选择器的部分啦~另起个开头以便观看

1.选择器：选中要写样式的元素

1.1基础选择器

1)全局选择器通用选择器

①语法

*{

}

②范围

选中页面所有元素

2)元素选择器

①语法

div{...}

p{...}

a{...}

img{...}

②范围

选中所有指定的元素

3)类选择器

①步骤

1)html元素加class属性(除了br,所有元素都有该属性)

2).className{}

②class 和id命名规则:

1)可以包含数字、字母、_、-、例如 :box-left box_right box1

2)不可以以数字开头

3)区分大小写

4)建议起有意义的名字

③注意：

1)类名可以重复

2)一个class可以起多个名字,空格隔开，不区分前后顺序

4)ID选择器

①步骤：

1)html元素加id属性(除了br,所有元素都有该属性)

2)#idName{}

②注意：

id名字具有唯一性

5)合并选择器

选择器1,选择器2,....{}

目的:提取共同样式

6)选择器优先级

行内样式 > ID选择器 > 类选择器 > 元素选择器

权重:1000 100 10 1

【权重越大优先级越高】

1.2关系选择器(利用html元素之间的关系)

1)子代选择器 >

选择器1>选择器2{}

范围:选中直接子代(儿子)

2)后代选择器空格

选择器1 选择器2

范围:选中所有后代

3)相邻兄弟选择器 +

选择器1+选择器2

范围:选中下一个兄弟

4)通用兄弟选择器 ~

选择器1~选择器2

范围:选中后面所有符合条件的兄弟

2.css属性

2.1字体属性 -继承性

1)字体颜色          color:;

2)字体大小         font-size:;

3)字体是否加粗          font-wight:;

4)字体是否倾斜        font-style:;

                              默认值normal 取值italic

         5)字体               font-family:;

                                        默认为微软雅黑，多个字体之间要用逗号隔开，如果字体包含空格，必须使用引号包裹字体从左往右支持；若首个字体生效，则后面不会再生效

2.2文本属性 -继承性

1)元素内容的水平对齐方式-包含文字，行内元素

text-align:left/right/center

2)设置文本装饰

text-decoration:

none; 去掉下划线

underline; 下划线

overline; 上划线

line-through; 删除线

3)英文字母大小写转换（了解）

text-transform:;

uppercase; 全部大写

lowercase; 全部小写

capitalize; 每个单词首字母大写

4)首行缩进（了解）

text-indent:；

px像素

em相对单位，相对于当前字体大小默认1em=16px 2em=32px

3.颜色的取值

(1)关键词 red blue...

(2)十六进制【0-9 a-f】#rrggbb #000000:黑色简写： #000 #ffffff:白色简写#fff

(3)rgb(,,) 0-255 黑色:rgb(0,0,0) 白色:rgb(255,255,255)

(4)rgba(,,,) a:透明度取值0-1 0：不透明 1完全透明 0.5半透明

好啦这周学习笔记整理完毕！有什么不妥的地方还望大家指出！谢谢观看！