我的账户
猩码学苑

专注C++开发菁英教育

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

陈紫怡-20221012-CSS

[复制链接]
Dasmondlicht 发表于 2022-10-12 23:31:50 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
一、今日学习内容
  • CSS基本概念
    • 层叠样式表(cascading style Sheet)的简称,CSS也是一种标记语言,可以给HTML书写出来的网页设置不同的样式
  • CSS的语法规范
    • h1 {color:red;fontsize:14px;}
    • 语法注意点:
      • 1.选择器:用于制定CSS样式的HTML标签,{}里面是对该选择器设置的具体样式
      • 2.属性和属性值是以“键值对”形式出现
      • 3.属性是一种特定的样式属性,eg:字体颜色、大小等
      • 4.属性和属性值之间“:”隔开
      • 5.多个键值对之间用英文“;”隔开
    • 样式一般写在<head>标签中的<style>标签内(内部样式)
  • CSS基础选择器
    • 标签选择器(元素选择器)
      • 定义:是指用HTML标签名作为选择器,对页面中所有符合条件的一类标签来指定统一的CSS样式
      • 语法:
      • 优点:能快速设置页面中一类标签样式
      • 缺点:不能差异化设置样式
    • 类选择器
      • 差异化选择不同的标签
      • 语法:
      • 语法注意:
        • 1.类选择器用英文"."来定义,后面要跟类名
        • 2.长类名一般可以用横线来进行连接
        • 3.不要使用纯数字、中文等进行命名,要使用英文字母命名
        • 4、命名要有意义,尽量使他人一眼就知道这个类名的目的
      • 多类名使用
        • 1.标签class属性中写多个可以进行多类名调用
        • 2.多个类名之间要用空格隔开
        • 3.调用完就会显示所有被调用类名所声明的样式
        • eg:
    • ID选择器
      • 定义:
        • ID是唯一的标识,所以ID选择器主要是为了唯一id的HTML元素来指定特定的样式
        • id选择器用"#"来定义,用id来调用
      • eg:
      • id选择器和类选择器之间的区别
        • 1.类选择器相当于人名,一个人可有多个名字,一个名字也可被多人使用
        • 2.id选择器相当于省份证号码,唯一的,不能重复
        • 3.id选择器再一个网页中只能使用一次,类选择器可以使用多次
        • 4.类选择器子在修改样式中使用的频率最高,id选择器一般用于页面的唯一性元素上,与js来用
    • 通配符选择器
      • css中,通配符选择器用"*"来定义,标识选择页面中的所有元素

      • 通配符选择器不需要进行调用,可以直接给所有元素设置样式
  • CSS字体属性
    • font-family(字体选择)
      • 注:
        • 各字体间要使用英文","隔开
        • 一般情况下,使用系统默认字体,保证在任何浏览器中都能正常显示
        • 如果字体名字有空格,要用""将字体名字引起来
      • CSS Unicode字体
        • 在css字体设置中,如果要避免乱码,可以使用Unicode字体来进行字体声明
        • 常用Unicode表:
    •             
    • font-size(字体大小)
      • 1.单位:px
      • 2.谷歌默认字体16px
      • 3.可以给body标签中置顶文字大小,改变整个页面的文字大小
      • 4.不同浏览器可能默认字体大小不同,尽量设置一个明确字体大小,不要使用默认大小
    • font-style(字体风格)
      • 常用属性值
        • normal:默认值,浏览器显示标准字体样式
        • italic:斜体样式
      • 注:
        • 斜体样式平常很少使用,而是更大将<em>/<i>改为正常字体
    • font-weight(字体粗细)
      • 设置文本粗细
      • 常用数值:
        • 400:正常字体粗细
        • 700:加粗字体
        • 不加px单位
    • 字体的复合属性
      • 字体属性可以综合书写,代码精简,开发常用方式
      • 语法格式

      • 注:
        • 使用font属性时,必须按照严格的语法格式中属性值的顺序来进行书写,不可以随便更换顺序,各属性用空格隔开
        • 可以省略:font-style   font-weight,不可省略:font-size    font-family
        • line-height是为了设置行高
          • 具体像素值
          • 倍数
  • CSS文本属性
    • 文本颜色
    • 可以使用16进制、RGB及英文单词表示颜色,实际开发最常用的是16进制
    • 文本对齐

    • 文本装饰

      • text-dacoration属性设置文本装饰,使用最多的属性值是line-through(价格删除)和none(主要给a标签取消下划线)
    • 文本缩进
      • text-indent属性来对指定文本的第一行进行缩进
            

      • 可以使用具体像素值进行缩进
      • 使用em 单位值缩进
      • em是一个相对单位,就是当前元素的一个文字大小,要缩减两个font-size单位时,将text-indent值写为2em

    • 行间距
      • line-height属性,设置行间距、行高,
      • 可以写具体的像素值或倍数

  • CSS的三中引用方式
    • 行内(行内式)样式表
      • 在元素标签内部的style属性中设置css样式,适合于简单的样式修改

      • 注:
        • 行内样式书写时,要符合css书写规范
        • 样式写在style属性中,要双引号引起来
        • 书写繁琐,没有实现结构样式分离的思想
    • 内部(嵌入式)样式表
      • html页面内部,所有css代码写下style中
      • 注:
        • 没有实现结构和样式分离
        • 练习时使用
    • 外部(链接式)样式表
      • 实际开发中最常用的方式,创建一个css文件放入需要样式,然后在html中引入样式文件即可
      • 引入外部样式表步骤
        • 1.创建后缀名为.css的样式文件
        • 2.在HTML文件中,使用<link>标签来进行引入
          • link属性
            • rel
              • 定义当前文档与被链接文档的关系,这里直接写成stylesheet,表示被链接的文档是一个样式表文件
            • href
              • 定义引入文件路径
      • 整合多个外部样式表集中导入
        • 样式表1

        • 样式表2

        • 几种样式表

  • Emmet语法

      


回复

使用道具 举报

关注0

粉丝0

帖子50

发布主题
大家都在学
课堂讨论
一周热帖排行最近7x24小时热帖
关注我们
专注C++菁英教育

客服电话:18009298968

客服时间:9:00-21:00

猩码学苑 - 专注C++开发菁英教育!( 陕ICP备2025058934号-1 )

版权所有 © 陕西菁英数字科技有限公司 2023-2026