2021-04-26 CSS3学习第一天

最新推荐文章于 2024-11-04 07:45:03 发布

xlxorz

最新推荐文章于 2024-11-04 07:45:03 发布

阅读量145

点赞数

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

本文链接：https://blog.csdn.net/qq_44683943/article/details/116198811

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS3学习第一天（20210426）

CSS - Cascading Style Sheets层叠样式表，是一种标记语言

CSS - Cascading Style Sheets层叠样式表，是一种标记语言
CSS用于修饰HTML页面
- 文本内容（字体、大小、对齐方式）
- 图片外形（宽高、边框样式、边距）
- 版面布局
- 外观显示样式
结构与样式相分离
- 结构-HTML
- 样式-CSS
CSS语法规范 - 选择器+声明(s)
- 选择器 { 属性1：值1 ; 属性2：值2 ……}
  - 选择器用于指定起作用的HTML标签（要对谁做）
  - 声明（属性 : 值 ; ）说明要设置什么样式（要做什么）
  - eg: h1 { color : red ; font-size : 28px ; }
  - 实际使用时一般将各条声明分行写
  - 选择器和 { 之间空一格，冒号和属性值之间空一格
- 一般写在<head></head>内部的<style></style>标签里面
CSS选择器
- CSS基础选择器（单个选择器组成）
  - 标签选择器
    - 以HTML标签名作为选择器，选中的一类标签全部都会设置成该种格式
  - 类选择器（最常用）
    - 在要改变样式的一个或几个标签里添加类属性 <div class="xxx">巴拉巴拉</div>
    - 在head里的style标签里用点+类名的方式选中类标签 .xxx { 改成啥样…… }
    - 类名可以用中短横线，尽量用英文命，有意义
    - 一个标签可以同时具有多个类名各类名之间用空格隔开 <div class="xxx yyy">巴拉巴拉</div>
    - 某些具有相同属性的标签可以借助类选择器减少代码重复性（面向对象的继承？）
  - id选择器
    - 在要改变的一个标签里加上id属性 <div id="yyy">巴拉巴拉</div>
    - 一个id只能给一个标签使用（一个标签也只能具有一个id吗？没听过讲这个）
    - 在head里的style标签里用 #+类名的方式选中类标签 #yyy { 改成啥样…… } .类 #id
  - 通配符选择器
    - * { 要改成啥样…… }
    - *表示选中所有标签（有点像数据库里面的select *）
- CSS复合选择器
CSS字体属性
- font-family 字体系列
  - 如微软雅黑、黑体、宋体
  - 可以同时设置多种字体，中间用逗号隔开
  - 最好用英文写，多个单词组成的得加引号
  - body { font-family : "Microsoft YaHei",arial ; }
- font-size 字体大小
  - 常用px作单位，表示像素，Chrome默认大小为16px
  - 尽量给出明确大小，不用默认（因为各个浏览器默认值可能不一样）
  - 用标签选择器，选择对象为body，可以指定整个页面的字体大小
  - body { font-size : 28px ; }
- font-weight 字体粗细
  - 可选100-900，400是默认，700是加粗没有单位！
  - normal 普通粗细，常用于把标题字体粗细变成普通（因为标题默认会加粗）
  - bold 加粗（考研单词，我记得还有勇敢无畏的意思2333）
- font-style 字体样式
  - italic 斜体
  - normal 普通不斜，常用于将em或i变斜了的字体正过来
- 字体复合属性
  - 将4种属性合在一起写(空格隔开)，按顺序就不用每个单独指出是什么属性
  - font : font-style font-weight font-size/line-height font-family ;
  - 斜体粗细大小字体 style weight size family
  - body { font : italic bold 28px/32px "Microsoft Yahei" ; }
  - font-size 和 font-family 这两个必须要有，其他的可以省略
CSS文本属性
- color 颜色
  - div { color : red ; }
  - 预定义颜色值，red,green,blue
  - 十六进制，#2266FF ,6位数都可以从0-9，A-F (最常用)
  - RGB代码，rgb(255,0,0)或rgb(100%,0%,0%)
- text-align 对齐
  - div { text-align : center ; }
  - left(默认值)，center，right
- text-decoration 装饰
  - div { text-decoration : underline ; }
  - none 没有装饰（常用于取消引用链接a自动产生的下划线）
  - underline 下划线
  - overline 上划线
  - line-through 删除线
- text-indent 缩进
  - div { text-indent : 2em ; }
  - 常用于段落首行缩进，单位可用px像素，1个em表示当前font-size一个字的大小
- line-height 行间距
  - p { line-height :28px ; }
  - 行间距=文本高度+上间距+下间距
CSS引入方式
- 内部样式表-嵌入式
  - 把所有css代码放在html中的style标签里
- 行内样式表-行内式
  - 直接在某个标签内部加上style属性，适用于局部简单修改
  - <p style="font-size : 25px ; color : pink ; " > balabala</p>
  - 感觉不适合开发使用，单个标签找不到会被锤的吧
- 外部样式表-链接式
  - 单独建一个后缀为.css的文件，把所有css代码放在里面（不用style标签，直接写就行）
  - 在要装饰的html中用<link>标签引入对应css文件
  - <link rel = " stylesheet " href = "css文件路径"> 单标签
  - 结构html与样式css分离，开发最常用