前端学习笔记（二）——CSS（1）

最新推荐文章于 2024-07-14 16:50:03 发布

焦糖贞子碎

最新推荐文章于 2024-07-14 16:50:03 发布

阅读量208

点赞数

分类专栏：前端学习笔记文章标签： css

本文链接：https://blog.csdn.net/CatCat1997/article/details/104856339

版权

前端学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端学习笔记（二）——CSS（1）

1、认识css

概念：

CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）
作用：

主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS以HTML为基础，提供如字体、颜色、背景的控制及整体排版等丰富的功能，同时可以针对不同的浏览器设置不同的样式。

2、引入css样式表

行内式

概念：通过标签的style来设置元素的样式

语法格式:

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

例子：

<div style="color:green;font-size: 30px;"> 学习笔记 </div>

内嵌式

概念是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

语法格式

<head>
<style type="text/CSS">
    选择器（选择的标签） { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
</style>
</head>

例子

<head>
<style type="text/CSS">
    div{
        color: green;
        font-size：20px;        
    }
</style>
</head>

注意
- style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
- type=“text/css” 在html5中可以省略。

外链式

概念

将所有的样式放在一个或多个以**.CSS**为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中

语法结构

<head>
  <link rel="stylesheet" type="text/css" href="css文件路径">
</head>

注意

link是一个单标签

link标签需要放在head头部标签中，同时需要指定link标签的三个属性

属性	作用	示例
rel	定义当前文档与被链接文档之间的关系	在这里指定为“stylesheet”，表示被链接的文档是一个样式表文件。
type	定义所链接文档的类型	在这里指定为“text/CSS”，表示链接的外部文件为CSS样式表。
href	定义所链接外部样式表文件的URL	可以是相对路径，也可以是绝对路径。

3、选择器作用

选择标签
选择器分为基础选择器和复合选择器

4、css基础选择器

1、标签选择器

直接写标签，全部选中
语法结构：

标签名 {
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3; 
}

2、类选择器

点定义

语法结构：

类名选择器

.studying {   
     color: green;
     font-size：20px; 
}

标签

<div class='studying'></div>

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Google</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .blue {
            color: blue;
            font-size: 100px;
        }

        .red {
            color: red;
            font-size: 100px;
            transform: rotate(45deg);
        }

        .orange {
            color: orange;
            font-size: 100px;
        }

        .green {
            color: green;
            font-size: 100px;

        }

        .red2 {
            color: red;
            font-size: 100px;
            display: inline-block;
            transform: rotate(-30deg);
        }


    </style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red2">e</span>
</body>
</html>

3、类选择器 —多类名

目的

给标签指定多个类名，从而达到更多的选择目的。
格式
```
<div class="pink font20">emmmmmm</div>
```

4、id选择器

语法结构

id选择器：

#idName {
    属性1:属性值1; 
    属性2:属性值2;
    属性3:属性值3; 
}

标签：

<div id="idName"></div>

注意：元素的id值是唯一的，只能对应于文档中某一个具体的元素。

5、通配选择器

概念：通配符选择器用*号表示， * 就是选择所有的标签，能匹配页面中所有的元素。

例子

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

注意:会匹配页面所有的元素，降低页面响应速度

5、CSS字体样式属性

1、font字体

font-size：大小
- 作用：font-size属性用于设置字号
- 单位：可以使用相对长度单位，也可以使用绝对长度单位。
  
  相对单位长度说明
  em 相对于当前对象内文本的字体尺寸
  px 像素
  
  绝对长度单位说明
  in 英寸
  cm 厘米
  mm 毫米
  pt 点
- 语法格式
```
p {  
    font-size:20px; 
}
```
- 注意：
  
  谷歌浏览器默认的文字大小为16px
  
  不同浏览器默认显示的字号大小可能不一致

相对单位长度	说明
em	相对于当前对象内文本的字体尺寸
px	像素

绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

font-family：字体

作用：font-family属性用于设置具体字体。
代码格式：
```
p{ 
    font-family:"微软雅黑";
}
```
注意：可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体，如果都没有，则以我们电脑默认的字体为准。
```
p{
    font-family:"Microsoft Yahei", "微软雅黑";
}
```

CSS Unicode字体

原因：在 CSS 中设置字体名称可以直接写中文。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。
解决方案：1、使用英文代替；2、使用 Unicode 编码来写字体名称

示例:

p{
    font-family:"\5B8B\4F53", "\65B0\5B8B\4F53";
}

字体名称	英文名称	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

font-weight：字体粗细
- 作用：除了使用b和strong标签来实现文本加粗，也可以使用css来实现
- 代码格式：
```
p{
    font-family:"\5B8B\4F53", "\65B0\5B8B\4F53";
    font-weight：800;
}
```
- 属性介绍：
  
  属性值描述
  normal 默认值（不加粗）
  bold 定义粗体（加粗）
  100~900 400 等同于 normal，而 700 等同于 bold
font-style：字体风格
- 作用：除了使用i和em标签来实现文本倾斜，也可以使用css来实现
- 代码格式：
```
p{
     font-style:italic;
}
```
- 属性介绍：
  
  属性作用
  normal 默认值，浏览器会显示标准的字体样式 font-style: normal;
  italic 浏览器会显示斜体的字体样式。
font：综合设置
- 语法格式：
```
选择器 { 
    font: font-style  font-weight  font-size/line-height  font-family;
}
```
- 注意
  - 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
  - 其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

属性值	描述
normal	默认值（不加粗）
bold	定义粗体（加粗）
100~900	400 等同于 normal，而 700 等同于 bold

属性	作用
normal	默认值，浏览器会显示标准的字体样式 font-style: normal;
italic	浏览器会显示斜体的字体样式。

2、CSS外观属性

color:文本颜色
- 作用:color属性用于定义文本的颜色
- 语法格式
```
    p {
            color: red;           
        }
```
- 取值
  
  表示属性值
  预定义的颜色值 red，green，blue…
  十六进制 #FF0000，#FF6600，#29D794
  RGB代码 rgb(255,0,0)或rgb(100%,0%,0%)
- 注意：实际开发中较为常用分为十六进制
text-align:文本水平对齐方式
- 作用：text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性
- 语法格式
```
 text-align: center;
```
- 取值
  
  属性值描述
  left 左对齐（默认值）
  right 右对齐
  center 居中对齐
- 注意：是让盒子里面的内容水平居中，而不是让盒子居中对齐
line-height:行间距
- 作用：line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。
- 语法格式
```
line-height: 24px;
```
- 取值：line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%
text-indent:首行缩进
- 作用：text-indent属性用于设置首行文本的缩进
- 语法格式
```
p {
      /*行间距*/
      line-height: 24px;
      /*首行缩进2个字符*/
      text-indent: 2em;  
 }
```
- 取值
  - 其属性值可为不同单位的数值。em表示字符宽度的倍数；或者使用百分比%，允许使用负值。
text-decoration 文本的装饰
- 作用：text-decoration 通常用于给链接修改装饰效果
- 语法格式：
```
<a href="#" style="text-decoration:none">CSS学习</a>
```
- 取值
  
  属性值描述
  none 取消下划线
  underline 定义文本下的一条线
  overline 定义文本上的一条线。
  line-through 定义穿过文本下的一条线。

表示	属性值
预定义的颜色值	red，green，blue…
十六进制	#FF0000，#FF6600，#29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

属性值	描述
left	左对齐（默认值）
right	右对齐
center	居中对齐

属性值	描述
none	取消下划线
underline	定义文本下的一条线
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。

6、快捷操作emmet语法

生成标签直接输入标签名点击tab键：比如div然后tab 键，就可以生成
生成多个相同标签加上 * ：比如div*3，可以快速生成3个div
生成父子级关系的标签，可以用 >：比如 ul > li
生成兄弟关系的标签，用 + ：比如 div+p
生成带有类名或者id名字的，直接写 .demo 或者 #two tab 键
生成的div 类名是有顺序的，可以用自增符号 $
emment语法

焦糖贞子碎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记（二）——CSS（1）

前端学习笔记（二）——CSS（1）1、认识css概念： CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）作用：主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS以HTML为基础，提供如字体、颜色、背景的控制及整体排版等丰富的功...
复制链接

扫一扫