css

最新推荐文章于 2024-01-15 00:00:00 发布

谁的青春不是梦

最新推荐文章于 2024-01-15 00:00:00 发布

阅读量66

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_53515338/article/details/116169973

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

    javascript 是编程语言
    HTML是标签语言、超文本标记语言
    css是样式语言

css的作用

             css的概念：
                     层叠样式表语言
              css的注释：
                      /*       */
              
             作用：
                    设置HTML页面中的某些元素的样式，让HTML页面更好看  
                    解释：好比HTML的化妆品一样
                     
            HTML是主体。css依赖html，css的存在就是装饰html，所以新建的文件还是.HTML文件
             
            掌握的css的要求：
                    * 常见css样式能看懂，会写，会记住

HTML引入css样式的三种方式概述

                   第一种方式：
                              在标签内部使用style属性来设置元素的css样式，这种方式称为 内联定义方式
                              语法格式：
                                             <标签 style = "样式名"：样式值；（后面的依次类推）>< /标签>
                                            还可以：
                                                      <样式名：样式值+空格+样式值+空格+样式值；等等>
                                             
                  第二种方式：
                             在head标签中使用style块，这种方式被称为样式块方式
                             语法格式：
                                    < head>
                                           <style type = "text/css"(固定的写法)>
                                                   选择器{
                                                         样式名：样式值；
                                                         样式名：样式值
                                                         .......
                                                   }
                                                   还以再写选择器
                                           </style>
                                    </head>

                      选择器：
                             id选择器：#+id名字
                   
                   第三种方式：链入外部样式表文件（最常用）
                             实现原理：将样式写道一个独立的xxx.css文件当中。在需要的网页上直接引入css文件，样式就引入
                             语法格式：
                                             <link type = "text/css" rel = "stylesheet" href = "css文件的路径" />
                                             sursor：鼠标样式
                                             如：pointer 小手 hand也是（兼容方式）

标签选择器和类选择器

                调用选择器需要在head写上：
                                                  <style type = "text/css"></stype>
               标签选择器：
                      语法格式：
                              标签名 {
                              样式名：样式值；
                              样式名：样式值
                              ......
                              }
                           标签选择器的作用方位比较广泛       
                           div：定义文档中的节，（布局）（图层）
                           
               类选择器：
                      需要写和定义名字
                      语法格式：
                                       .类名{
                                       样式名：样式值；
                                       样式名：样式值；
                                       ......
                                       }

列表样式

                    <style type = "text/css">
                    ul(无序列表  ol 有序列表){
                    list-style-type：none；（去掉圆点）
                    }
                    </style>

绝对定位

             可以在选择器上定义定位（position：absolute）绝对定位
             如：<style type = "text/css">
             div（布局）{
             
                       background-color：red；
                       border(边框)：1px balck solid；
                       width：300px；
                       height：300px；
                       position：absolute；
                       left：100px
                       top：100px

             }
             </style>