HTML+CSS第一周学习总结

最新推荐文章于 2023-06-29 20:59:40 发布

又要头秃了

最新推荐文章于 2023-06-29 20:59:40 发布

阅读量155

点赞数

文章标签： css html 学习

本文链接：https://blog.csdn.net/weixin_69289422/article/details/124690717

版权

CSS知识太多太杂，学习视频看了后面的忘了前面的，所以打算简单记下几个知识点，好拿来复盘

CSS基础选择器

在head里用<style></style>去装饰页面

选择器{color：；

font-size：；}

类选择器

可以在<style></style>里直接写个类的属性，在下面直接调用

例如：

<head>
<style>
.red {
      color:red;
     }
<style>
<head>
<body>
<div class="red">想说的话</div>
</body>

除了用类选择器，还有一种是id选择器

例如

<head>
<style>
#red {
      color:red;
     }
<style>
<head>
<body>
<div id="red">想说的话</div>
</body>

这两种没太大区别，都是在下面调用

但是！！！id选择器只能在下面用一次，而类选择器可以对多个对象进行调用。

通配符选择器

用*定义，把所有的标签都修改样式

<style>
     *{
       color:red;
      }
</style>

CSS字体属性

字体显示更改

<style>
p {
   font-family:"微软雅黑";
  }
</style>

用的是类选择器

字体粗细

font-weight

各个属性名称：

bold 粗体

bolder 特粗体

lighter 细体

注：可以直接写数字

例如

p{
  font-weight:400;
 }

文字样式

font-style

italic 斜体

normal 让斜体正回来

p{
  font-style:italic;
 }
或直接写
<em>你想写的内容</em>

字体复合属性

p{
  font: font-style font-weight font-size/line-height font-family
  font:italic 700 16px "微软雅黑" 
 }

千万要注意！！！！上述顺序不能颠倒，必须按这样的顺序

font-style font-weight font-size/line-height(行高) font-family

以空格隔开，并且！！！！font-size和font-family必须存在，其他可以省略

CSS文本属性

对齐文本

text-align

left 左对齐（默认）

right 右对齐

center 居中

用法例如

div{
    text-align:center;
   }

对于图片居中问题，不能直接在img里加，要从她的上一个标签加center

\装饰文本

text-decoration

underline 下划线

overline 上划线

line-through 删除线

none 取消默认下划线（一般超链接会自带下划线）

div{
    text-decoration:underline;
   }

文本缩进

text-indent

p{
  text-indent:20px;
 }
//首行缩进20px大小
或
p{
  text-indent:2em;
 }
//首行缩进两个文字大小距离

行间距

line-height 行间距由三部分组成：文本高度、上间距、下间距

CSS引入方式

三种样式表

内部样式表

在<style>中定义，同之前上面

行内样式表

直接写在需要的地方

<p style="color:red;">想写的内容</p>

外部样式表

单独在外部建一个CSS文件，再引入到HTML中

使用<link>标签，将外部的CSS文件引入到HTML中

在HTML文件中head里写
<link rel="stylesheet" herf="CSS文件名">

先写一小部分，晚自习再写剩下的

又要头秃了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS第一周学习总结

CSS知识太多太杂，学习视频看了后面的忘了前面的，所以打算简单记下几个知识点，好拿来复盘CSS基础选择器在head里用<style></style>去装饰页面选择器{color：；font-size：；}类选择器可以在<style></style>里直接写个类的属性，在下面直接调用例如：<head><style>.red { color:red; }<style&g
复制链接

扫一扫