CSS 基础之一简介、选择器、字体样式、文本样式、边框样式

玛 *

已于 2024-03-06 22:42:01 修改

阅读量949

点赞数 23

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

于 2024-03-06 22:39:48 首次发布

本文链接：https://blog.csdn.net/yeyihexizhu/article/details/136500130

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在VSCode中使用HTMLCSSSupport、Liveserver和HtmlFormatter插件，以及CSS的基础知识，包括CSS的引入方式、ID和class的选择器、字体样式、文本样式和边框样式。此外，还展示了如何在HTML中快速生成模板和应用CSS样式。

摘要由CSDN通过智能技术生成

一软件使用

1，使用软件与插件

使用vscode , 并下载插件HTML CSS Support 和 Live server及Html Formatter。

2，快速生成html文件模版

在vscode里新建文件index.html，英文模式下输入！感叹号，选择第一个，并按tab键快速生成html模版。

二基础知识

1，css简介

（1）css简介说明

CSS，指的是Cascading Style Sheet（层叠样式表），它是用来控制网页外观的一门技术。我们都知道，前端最核心的三个技术是：HTML、CSS和JavaScript。三者的关系如下：
“HTML控制网页的结构，CSS控制网页的外观，JavaScript控制网页的行为。”

（2）css引入方式

行内样式（内联样式 Inline style)
- 在标签的style属性“中定义。
内部样式(internal style)
- 内部样式表，指的是把HTML代码和CSS代码放到同一个HTML文件中。其中，CSS代码放在style标签内，并且style标签是放在head标签内部的。
外部样式(external style)
- 外部样式表是最理想的CSS引入方式。在实际开发中，为了提升网站的性能和可维护性，一般都是使用外部样式表。所谓的外部样式表，指的是把CSS代码和HTML代码单独放在不同的文件中，然后在HTML文档中使用link标签来引用CSS样式表。
- 外部样式表在单独文件中定义，然后在HTML文件的<head></head>标签对中使用link标签来引用。
- 语法<link rel="stylesheet" type="text/css" href="文件路径" />
- rel即relative的缩写，它的取值是固定的，即stylesheet，表示引入的是一个样式表文件（即CSS文件）。
- type属性取值也是固定的，即"text/css"，表示这是标准的CSS。
- href属性表示CSS文件的路径。对于路径，相信小伙伴们已经很熟悉了。

（3）css注释：/注释内容/

2，css选择器

（1）元素的 id和 class

id 属性(具有唯一性）
- 一个页面只能出现一个id，如果出现多个将无法识别。不同的页面可以出现相同的id。
class属性（类似名字，可以重名）
- 可以为同一个页面的相同元素或者不同元素设置相同的class，然后使得具有相同class的元素具有相同的css样式。
选择器是什么
- 用一种方式把想要的元素选中。css 中有很多方式可以选中想要的元素，这些不同的方式就是不同的选择器。

（2）css选择器

元素选择器
id选择器
- 语法：#box{} ,其中box是id名称；#是选择器前缀。
class选择器
- 语法：.box{} ,class名称前必须加前缀，（英文点号），否则改选择器无效。
后代选择器
- 语法：选择元素内部中所有的某一种元素，包括子元素和其他后代元素（比如孙元素）
- 写法：例如：h3,p{width:100px; height:100px;}
群组选择器

3，字体样式

（1）字体样式属性

font-family（字体类型）
- 语法：font-family：字体1，字体2，...字体N;
- 常用中文：微软雅黑，宋体
- 常用英文：Times New Roman, Arial , Verdana;
font-size（字体大小）
- 属性（关键字）：small,medium,large等
- 属性（像素值）：px（全称pixel 像素），如10px。
- 语法：font-size：像素值；
font- weight （字体粗细）
- 语法：font- weight :取值；
- 属性（数值）：100～900
- 属性（关键字）：
  - normal（正常，默认值）400
  - lighter（较细）100
  - bold（较粗）700
  - bolder（很粗，其实效果跟bold差不多）900
font-style（字体风格）
- 属性：normal（正常，默认值）；italic（斜体）；oblique（斜体）。
- 语法：font-style:取值；
color （字体颜色）
- 语法：color :颜色值;

4，文本样式

（1）文本样式属性

text-indent（首行缩进）
- 语法：text-indent：像素值；（比如，text-indent：28px;)
text-align（水平对齐）
- 语法：text-align：取值；（可用于图片img 和文本）
- 属性值：left 左对齐 center 居中对齐（最常用） right右对齐
text-decoration（文本修饰）即下划线，中划线，顶划线。
- 语法：text-decoration：取值；（比如：{text-decoration: underline ;}）
- 属性值：none去除所有的划线效果（默认值）； underline 下划线； line-through 中划线； overline顶划线。
text-transform（大小写）针对英文大小写转换，中文不存在这个问题。
- 语法：text-transform：取值；（比如：{text-transform: lowercase; })
- 属性：none无转换（默认值） uppercase转换为大写 lowercase 转换为小写 capitalize只将每个英文单词首字母转换为大写。
line-height（行高）
- 语法：line-height：像素值；
letter-spacing（字母间距），中文一般不用。
- 语法：letter-spacing：像素值；
word-spacing（词间距）一般只针对英文单词，中文一般不用。
- 语法：word-spacing：像素值；

5，边框样式

（1）边框简介

例如：导航中的边框（div元素）；图片中的边框（img元素）；表格中的边框（table元素）
边框样式属性
- border-width边框的宽度，取值为像素值
- border-style边框的外观（实线和虚线等）；
  - 属性取值：none无样式；dashed 虚线； solid实线；
- border-color边框的颜色；

（2）局部样式（属性值: width , style , color)

上边框 border-top
下边框 border-bottom
左边框 border-left
右边框 border-right

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>text</title>
		<!--群组选择器的写法一-->
		<style type="text/css">
		
			/*NO.1定义所有div的样式-局部边框*/
			div{
				width:400px;
				height:40px;
				border-top:2px solid yellow;
				border-right:2px solid yellow;
				border-bottom:2px solid indianred;
				border-left:2px solid indianred;
			}
            /*NO.2定义所有div的样式-*/
            #div1{border:1px  dashed greenyellow;}	
		    #div2{border:1px  solid greenyellow;}
			
			/*NO.3给图片加边框*/
			img{border:2px solid blue;}
		
		</style>

	</head>
	<body>
        <!--No.1给div加边框-->
        <div>世界和平</div>

		<!--No.2给div加边框-->
		<div id="div1">长歌行</div>
		<div id="div2">君不见黄河之水天上来，奔流到海不复回。</div>
		<div id="div2">君不见高堂明镜悲白发，朝如青丝暮成雪。</div>
		
		<!--NO.3给图片加边框-->
		<img src="images/1.jpg" alt="插画">
		
	</body>
</html>