day3-初识CSS样式与文本背景样式

最新推荐文章于 2024-11-13 20:09:05 发布

宠溺怪

最新推荐文章于 2024-11-13 20:09:05 发布

阅读量53

点赞数

分类专栏：前端学习-css篇文章标签： css 前端

本文链接：https://blog.csdn.net/jkkxc/article/details/131289966

版权

前端学习-css篇专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS（层叠样式表）用于网页的排版和美化，包括字体、颜色、图片等样式设置。选择器如标签选择器、ID选择器和类选择器用于定位HTML元素。样式表有内部、外部和行内三种写法，不同写法有不同的优缺点和适用范围。div标签常用于布局，span用于文本样式。此外，文章还介绍了背景样式和文本样式的各种属性。

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

1.什么是CSS(层叠样式表)

html --> 写东西出来给别人看的

css --> 找到html写出来的东西.再给它加特效
css -- 层叠样式表 --> 用来对网页进行排版,美化外观,优化性能
文本 -- 字体,大小,颜色,缩进
图片 -- 宽高,边框,颜色,透明

html: 身体 css: 化妆品
网页文件的后缀: .html
样式表文件的后缀: .css

css注释写法
/* 注释内容 */

2.css选择器

css的工作分为两步: 1.找到元素 2.加样式
选择器就是帮助我们找到元素的一种方式.通过选择器找到对应的标签元素

1.标签选择器: 选择一个标签(一个网页里的所有该标签) 主要是用来清除/设置默认样式
   标签名{
       属性:值;
       属性:值;
   }

p{
color: #096;
font-size : 70px;
}

2.id选择器: 先给标签设置id名,然后通过#id名的方式找到该标签. id相当于身份证,是唯一的.不要给多个标签设置重复id
   语法格式:
       <标签名 id='id名'>
       <b id='hot'>

       #id名{
           属性:值;
           属性:值;
       }
   #hot{
   color:red;
   font-size: 20px;
   }

3.class选择器(类): 先给标签设置class类名/类型. 然后通过.class名的方式找到改标签. class为类型,可以有多个.id只能有一个
   语法格式:
       <标签名 class='类名'>
       <span class='money'>

       .类名{
           属性:值;
           属性:值;
       }

       .money{
           color:gold;
           font-size: 30px;
       }

可以给标签设置多个类名.属性会同时生效
<标签名 class='类名1 类名2'>
<span class='money water'>

4.通配符选择器(*): 通配符选择器用*号表示.表示选中网页里的所有元素(正式开发不用)
   语法格式:
       *{
           属性:值;
           属性:值;
       }

3. *{
           color: #6cf;
           font-size:50px;
       }

相对来说class选择器用的最多.
标签选择器.一般是用来清除样式/设置默认样式.
一个网页,我不想要a标签的样式/换个样式.就可以用标签选择器全选,去除. 所以一般给加样式,用class/id为主

3.css样式的三种写法

style:样式

1.内部样式表 -->把样式写在页面的style标签中.style标签写在head里的
   语法格式:
       <head>
           <style>
               css代码
           </style>
       </head>

2.外部样式表 --> 把css代码写在一个专门的.css文件里.需要使用的时候就用link标签导入. 类似于python的模块
写好css文件后,在head里用link标签读取样式
<link rel="stylesheet" href="文件路径">

3.行内样式表 --> 通过标签属性style.直接把样式写在标签里
<标签名 style='属性:值;属性:值'>

样式表优先级参考就近原则 -- 行内样式 > 内部样式/外部样式 (谁离标签近就听谁的)

样式表总结:
   1.行内样式表:
       优点: 写起来方便/权重较高
       缺点: 灵活性不强
       频率: 较少
       范围: 单个标签

   2.内部样式表
       优点: 写起来方便 / 在单个网页时较灵活
       缺点: 可复用性不强
       频率: 较高(学习阶段主要用它)
       范围: 整个网页

   3.外部样式表
       优点: 可复用性
       缺点: 需要导入
       频率: 最高(正式开发时,主要用它)
       范围: 整个网站
学习过程中.优先使用内部样式表. 以后做项目时.再用外部样式表

4.div盒子标签(division)

div主要是用来布局使用.因为它本身没有含义/属性/样式. 很单纯,可塑性强.
适合作为容器使用.所以管它叫盒子.把对应的内容放到盒子里面
div本身是没有宽高/颜色/边框这些样式
width: 宽度
height: 高度

快捷键:
快速创建一个id为XX的盒子 #XX
快速常见一个class为xx的盒子 .XX

5.文本样式(font)

span标签是一个文本标签,它没有特别的样式/属性.很单纯,所以适合用来加文本样式

1.color: （可以在这个网站查具体颜色）https://www.sioe.cn/yingyong/yanse-rgb-16/
   color: blue;
   color: #096;
   color: rgb(70,130,200)
       颜色有三种写法:
           1.直接写预设好的颜色单词
               red gold pink green blue
           2.用十六进制颜色
               #096 原谅绿
               #6cf 天依蓝
           3.用rgb来设置颜色
               rgb(255,255,255) # 白色
               rgb(0,0,0) # 黑色
               rgb(70,70,70)

2.font-size: 字体大小. (px像素 em每个网页的默认属性，一个字的大小)
   font-size: 70px;
   font-size: 2em;
3.font-family: 设置字体(宋体,微软雅黑)
   font-family: "Microsoft YaHei";
4.font-weight: 字体粗细 100-900
   font-weight: 900;
5.font-style: 字体样式(倾斜)
   font-style: italic;
6.text-indent: 文字缩进
   text-indent: 2em;
7.text-align: 设置文本对齐;
   text-align: center
8.text-decoration: 设置文本样式(下划线)
   text-decoration: uderline; 下划线
                   none; 没有线（去除a标签的下划线）
                   overline; 上划线
9.line-height: 设置文本的上下位置
   line-height:30px;

6.背景样式(background)

background: 背景

1.background-color : 设置背景颜色
   background-color:#096; # 设置方式和color一样
2.background-image: 设置背景图片
   background-image: url(图片路径)
3.background-position : 设置背景位置
   left左 cetner中 right右 top上 bottom下
   0 0 --> 左上
4.background-size: 设置背景大小
   background-size: cover; # 缩放
5.background-repeat: 设置背景重复
   background-repeat: no-repeat; #背景不重复