菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: css基本样式_汪刚_2023.4.13 [打印本页]

---

作者: 霁后彩虹O    时间: 2023-4-13 22:58
标题: css基本样式_汪刚_2023.4.13

今日学习内容：
1.CSS概念：
CSS（Cascading Style Sheets）层叠样式表，是一种标记语言，它可以为页面设置丰富的样式，也能实现结构和样式的分离

2.css语法规范

            h1 {

                     color: red;

                     font-size:20px;

               }

注意点：


• 选择器用于指定选择哪个元素，{}里面写的是对这个元素的具体样式设置。
  
• 属性和属性值之间用“:”来隔开的，属性和属性值的这种形式也叫做键值对。
  
• 多对属性和属性值之后要用";"来结尾。
  
  3.css基础选择器
  
       标签选择器：
  概念
  
  • 
    
    • 标签选择器是指用HTML的标签名作为选择器，按照标签的类型来设置统一的CSS样式
      
               p {
  
                   color: red;
  
                }
  
  
  • 特点
    
    • 能快速选择页面中的某一类标签来设置样式，但是不能为同一类的标签设置差异化的样式。
      
• 类选择器：
  

              .red {
                   color: red;
                      }

• 注意点
  
  • 类选择器使用“.”来定义，用class来调用，在调用的时候不要写“.”。
    
  • 如果类名比较长，可以使用横线来进行连接
    
  • 不要使用纯数字、中文等来进行命名，类名要有意义，尽量都使用英文字母
    

     id选择器：
ID是唯一的页面表示，通常是为HTML来某个特定元素来指定特定的样式，CSS中的id选择器用“#”来定义。
         #color {
                   color:red;
                     }

• 注意点
  
  • 用#来定义，用id来进行调用。
    
  • 一个页面中同一个id选择器只能被调用一次，不能调用多次，因为id选择器中的样式一般都会比较特殊。
    
• id选择器和类选择器之间的区别
  
  • 类选择器好比人的名字，一个人可以有多个名字（多类名的使用），也可以一个名字可以被多个人使用（同一个类名被多次调用）
    
  • id好比人的身份证号码，每个人都是唯一的编号
    
  • id选择器一般情况下会和JS一起联合使用来为页面中的特殊的元素设定状态。
    

      通配符选择器：
在CSS中，通配符选择器用"*"来定义，表示选择页面中的所有的元素（标签）。
              *{
                  margin: 0;
                 padding:0;
               }
4.css字体属性

• 字体外观
  
  • 使用font-family 属性快来定义字体外观
  • 注意点
  • 
    
    • 1、各种字体之间要用英文的逗号隔开
      
    • 2、如果字体是一个词组，那么要用双引号引起来
      
  • CSS Unicode字体
    
    • 在CSS中设置字体名称，直接写中文是可以的，但是在字符集如果出现不匹配的情况，可能会产生乱码，如果是Unicode编码能避免该问
    • 例
    • 
    • 使用font-size属性来设置字体大小
    • 注意点：
      
      • 一般我们会将字体大小的值设置为具体的像素值，单位是(px)
        
      • 谷歌浏览器默认的字体大小是16px，最小到12px
        
      • 不同的浏览器之间对于默认的字体大小是不一致的，所以我们在写页面的时候，要设置一个明确的字体大小，不要使用默认值。
        
      • 一般情况下会给body来指定整个页面的字体大小
        
  • 字体风格
    
    • 使用font-style来设置字体的风格
      
    • 常用属性值
      
      • normal  默认值，浏览器会显示标准的字体样式
        
      • italic 浏览器会将字体显示为斜体
        
    • 例
    • 
      
    • 注意点：
      
      • 实际开发中很少将正常的字体改为斜体，一般会将em和i标签的斜体样式转化为正常显示，所以font-style:normal;使用的场景更多。
        
• 使用font-weight属性来控制字体的粗细
• 例
• 
• 注意点：一般情况下我们只设置400(正常字体粗细)和700（代表加粗字体粗细），值后面不要加单位。
    

• 语法规范
  
  • font：font-style font-weight font-size/line-height font-family;
  • 
    
• 注意点：
  
  • 使用font属性的时候，必须按照固定的属性顺序来进行书写，不能随便更换顺序，否则会导致font属性失效
    
  • 不需要的属性可以省略，font属性中可以被省略的属性 font-style 和 font-weight  不可以省略的是 font-size 和 font-family
    
  今日遇到问题：无

解决问题的方案：暂时没有

---

欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)

Powered by Discuz! X3.4