CSS基础知识学习笔记

最新推荐文章于 2024-08-10 22:43:21 发布

bbbgblbz

最新推荐文章于 2024-08-10 22:43:21 发布

阅读量52

点赞数

文章标签： css 学习 html

本文链接：https://blog.csdn.net/bbbgblbz/article/details/129771991

版权

一、CSS简介

CSS：美化HTML，布局页面。 CSS(Cascading Style Sheets) 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素。CSS 节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在 CSS 文件中

语法规范：css由两个主要的部分构成：选择器+一条或多条声明。
p { color: red; font-size: 12px; }

示例：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: blue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-size: 20px;
}
</style>
</head>
<body>

<h1>我的第一个 CSS </h1>
<p>这是一个段落。</p>

</body>
</html>

CSS

二、CSS选择器

1.标签选择器

用HTML标签作为选择器，
优点：为页面中某一类标签指定统一的CSS样式
缺点：不能设计差异化样式，只能选择全部的当前标签

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-align: center;
  color: red;
} 
</style>
</head>
<body>

<p>每个段落都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>

</body>
</html>

2.类选择器

在CSS中，类选择器以一个点 .类名 号表示，在HTML中以class = "类名"表示

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p> 

</body>
</html>

3.id选择器

id选择器可以为标有特定的id的HTML元素指定特定的样式 CSS中id选择器以#来定义,HTML元素以id=" "来表示id选择器

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>

</body>
</html>

4.通配符选择器

在CSS中，通配符选择器使用*定义，它表示选取页面中所有的元素（标签）

<!DOCTYPE html>
<html>
<head>
<style>
* {
  text-align: center;
  color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>页面上的每个元素都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>

</body>
</html>

二、字体属性

1.字体系列

font-family属性定义文本的字体系列

最常见的几个字体：body{font-family:“Microsoft YaHei”,tahoma,arial,“Hiragino Sans GB”;}

多个字体之间必须使用英文状态下的逗号隔开
尽量使用系统默认自带的字体，保证在任何用户的浏览器中都能正确显示

2.字体大小

font-size属性定义字体的大小

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}
</style>
</head>
<body>

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

</body>
</html>

3.字体粗细

font-weight属性设置文本的粗细。

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100-900	400等同于normal，而700等同于bold ，后面不跟单位

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-weight: normal;
}

p.light {
  font-weight: lighter;
}

p.thick {
  font-weight: bold;
}

p.thicker {
  font-weight: 900;
}
</style>
</head>
<body>

<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>

</body>
</html>

5.字体样式

font-style属性设置文本的风格

属性值	描述
font	简写属性，在一条声明中设置所有字体属性。
font-family	规定文本的字体系列（字体族）。
font-size	规定文本的字体大小。
font-style	规定文本的字体样式。
font-weight	规定字体的粗细。

二、文本

1.文本颜色

color属性用于定义文本的颜色

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

2.文本对齐

text-align属性用于设置元素内文本内容的水平对齐方式

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

3.装饰文本

text-decoration属性用于规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

属性值	描述
none	默认，没有装饰线（最常用）
underline	下划线，链接a自带下划线（常用）
overline	上划线（几乎不用）
line-through	删除线（不常用）

4.文本缩进

text-indent属性用来指定文本第一行的缩进，通常是段落的首行缩进.通过该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

em是一个相对单位，就是当前元素（font-size)一个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。

4.行间距

line-height属性用于设置行间的距离,可以控制文字与行之间的距离

四、CSS的引入方式

1.内部样式表

内部样式表是写到HTML页面的内部，将所有的CSS代码抽取出来，单独放到<style>中
嵌入式引入
<style>标签理论上可以放到HTML文档的任何地方，但一般会放在文档的<head>标签中。

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-align: center;
  color: red;
} 
</style>
</head>
<body>

<p>我写</p>

</body>
</html>

2.行内样式表

行内样式表是在元素内部的style属性中设定CSS样式

 <div style="color: red; font-size: 10px;">我写写写</div>

3.外部样式表

样式单独写到CSS文件中，之后把css文件引入到HTML页面中使用

新建一个后缀名为.css的样式文件，将CSS代码都放入此文件中

在HTML页面中，使用<link>标签引入这个文件。

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

bbbgblbz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础知识学习笔记

CSS：美化HTML，布局页面。CSS(Cascading Style Sheets) 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素。CSS 节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在 CSS 文件中语法规范：css由两个主要的部分构成：选择器+一条或多条声明。} h1 {} p {} </ style > </ head > < body > < h1 > 我的第一个 CSS </ h1 > < p > 这是一个段落。
复制链接

扫一扫