前端技术栈之CSS|青训营笔记

氼乚42
144 阅读4分钟

这是我参与「第五届青训营 」笔记创作活动的第2天

课堂笔记---课堂内容

一、CSS初识

1.CSS是什么

  • CSS概念：CSS(Cascading Style Sheets) 通常称为CSS样式表或层叠样式表（级联样式表）
  • CSS作用：
    • 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
    • CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

2.CSS语法

2.1内联样式

  • 概念：称行内样式，通过标签的style属性来设置元素的样式。
  • 其基本语法格式如下：
<p style="margin:1em 0">内容</p>

2.2嵌入式

  • 概念：将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
  • 其基本语法格式如下：
<head>
	<style type="text/CSS">
		选择器(选择的标签){
            属性1:属性值1;
            属性2:属性值2;
            属性3:属性值3; 
        }
    </style>
</head>
<head>
	<style type="text/CSS">
            li{
                margin：0；
                padding:0;
        }
    </style>
</head>

2.3外链式

  • 概念：是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中
  • 其基本语法格式如下：
 <link rel="stylesheet" href="css文件路径" type="text/CSS">

3.CSS工作顺序

image.png

二、CSS选择器

  • 选择器分为基础选择器和复合选择器
  • 选择器找出页面中的元素，以便给他们设置样式

1.基础选择器

  • 通配选择器：*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
  • 标签选择器：标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
  • id选择器： #id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
  • 类选择器：.类名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
  • 属性选择器：标签[属性]或标签[属性=值]{属性:属性值;} ^= $=
  • 伪类选择器：分为结构性伪类和状态性伪类
    • 状态伪类：不同状态的设置不同的样式，如：a标签的四种状态伪类；a:link(默认状态)、a:visited(访问过)、a:hover(鼠标移入)、a:active(鼠标按下)
    • 结构伪类：**ul li:first-child ul li:last-child **

2.复合选择器

image.png

A，B并集选择器

三、CSS属性

1.文字属性

1.1font-size:大小

  • 作用：font-size属性用于设置字号
p{font-size:20px;}
  • 单位：
    • 可以使用相对长度单位，也可以使用绝对长度单位。
    • 相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。

1.2font-family:字体

  • 作用：font-family属性用于设置哪一种字体。
p{font-family:"微软雅黑";}

1.3 font-weight:字体粗细

  • 在html中如何将字体加粗我们可以用标签来实现
    • 使用 b  和 strong 标签是文本加粗。
    • 可以使用CSS 来实现，但是CSS 是没有语义的
属性值描述
normal默认值(不加粗的)
bold定义粗体(加粗的)
100~900400等同于normal，而700等同于bold

1.4font-style:字体风格

  • 在html中如何将字体倾斜我们可以用标签来实现
    • 字体倾斜除了用 i  和 em 标签，
    • 可以使用CSS 来实现，但是CSS 是没有语义的
  • font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
属性作用
normal默认值，浏览器会显示标准的字体样式font-style：normal
italic浏览器会显示斜体的字体样式

1.5.font:综合设置字体样式

  • font属性用于对字体样式进行综合设置
  • 基本语法格式如下：
选择器{font:font-style font-weight font-size/line-height font-family;}

2.CSS外观属性

2.1color:文本颜色

  • 作用：color属性用于定义文本的颜色，

2.2 text-align:文本水平对齐方式

  • 作用： text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性

3. line-height:行间距

  • 作用：line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。
  • 单位：line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px

4. text-indent:首行缩进

  • 作用：text-indent属性用于设置首行文本的缩进
  • 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,
    • 建议使用em作为设置单位
  • 1em 就是一个字的宽度   如果是汉字的段落， 1em 就是一个汉字的宽度
p{
	line-height:25px;
	/*首行缩进两个字 2em*/
	text-indent:2em;
}

1.5 text-decoration 文本的装饰

  • text-decoration   通常我们用于给链接修改装饰效果 | 值 | 描述 | | ------------ | ------------------------ | | none | 默认。定义标准的文本，取消下划线(最常用) | | underline | 定义文本下的一条线，下划线，a标签自带的(常用) | | overline | 定义文本上的一条线(不用) | | line-through | 定义穿过文本下的一条线(不常用) |
avatar
文章
阅读
粉丝