Anaconda macos codeigniter sass 后台网站模板 多店版微信商城 jquery的点击事件 jquery事件绑定 git下载项目 idea格式化代码设置 车载u盘 python入门 mysql事务 python集合操作 python读文件 python环境变量配置 python模块下载 python模块大全 python创建文件 java基础数据类型 java终止线程 java日期格式化 linux教程 金山wps2003 源计划卡特 ps怎么插入表格 电视免费软件 java语言程序设计 手机模拟器下载 lol体验服转换器 管理文件 findall 音乐狂app cdlinux教程 fireworks序列号 android下载文件 qq流览器下载 搜狐影音播放器 dll文件 mmap文件怎么打开
当前位置: 首页 > 学习教程  > 编程语言

小白学习css的笔记

2021/1/13 19:33:36 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

什么是css css不能脱离HTML单独存在,因为css是为了修饰HTML而存在cascading style sheet层叠 样式 表 语法: 属性的设置 属性名和属性值之间使用冒号分割,多对属性之间使用分号分割,最后一个属性后面可以不加分号共有属性值sty…

什么是css

  • css不能脱离HTML单独存在,因为css是为了修饰HTML而存在
  • cascading style sheet
  • 层叠 样式 表

语法
属性的设置

  • 属性名和属性值之间使用冒号分割,
  • 多对属性之间使用分号分割,
  • 最后一个属性后面可以不加分号
  • 共有属性值style
 <div style="width:100pc;height:100px;blackgroud-color:black;"> </div>

如果不在style属性里,就写在一个代码块里

选择器(选择某一种元素的一种方式){
                                          width:100pc;
                                          height:100px;
                                          blackgroud-color:black;
                                    }

css的注释

  1. 注释的写法 /*注释内容*/
  2. 作用:增加代码的可读性,便于代码的维护和管理
  3. 注意:注释不能嵌套使用

css的速记写法

  • 简写形式:上右下左的顺序

           top        padding-top内边距
           bottom     margin-top外边距
           left
           right
     margin、padding:100px;//上下左右均为100px
     margin、padding:10px 20px//上下10px,左右20px
     margin、padding:10px 20px 30px//上10px,左右20px,下30px
     margin、padding:10px 20px 30px 40px//上10px,右20px,下30px,左40px
     margin:0 auto//设置给具有宽度的块级元素时,在父元素中自动居中
     broder:10px soild red
    
  • 如何将css作用到HTML上

     行内样式,写在标签内部的style属性上
     内嵌式/内部样式表,在head内部使用
     外部样式表:在当前HTML外部文件时,创建一个css文件(.css的文件),
        之后使用link标签(优先使用link标签,优先加载html)或者@import(优先加载css)
    优先级:
        行内样式>内嵌式=外部引入
        结论:是就近原则,哪一个样式距离html元素最近,谁的优先级就最高
    

选择器
标签选择器 通过标签名称选择一类元素

div{}、span{}、p{}

id选择器

#one:id=one:id

类选择器

 class:通过class属性选择一类元素
        .one:class='one'

普通选择器

*:选择所有

后代选择器

 空格:选择所有后代子元素
 >:选择直接子元素

兄弟选择器

 +:选择当前元素之后的一个兄弟元素
 ~:选择当前元素之后的所有兄弟元素

组合选择器

div #one .one
div#one
div.one

多选择器

div,p,span,#one,.one{}

属性选择器根据元素的属性选一类元素

  • [id]具有id属性的元素
  • [id=‘one’]具有id属性,且id属性为one的元素
  • [class~=‘one’]具有class属性,且属性值之一为one的元素
  • [class^=‘o’]具有class属性,且以o开头的元素
  • [class$=‘o’]具有class属性,且以o结尾的元素
  • [class*=‘o’]具有class属性,且属性中包含o字符的元素

伪类选择器

  • div class='one’真的类
  • :伪类名称
    • :first-child
    • :last-child
    • :nth-child(num/odd/even)
    • :only-child
    • :first-of-type
    • :last-of-type
  • a:超链接
    • :link 未点击状态
    • :hover 悬停状态
    • :active 鼠标按下状态
    • :visited 点击之后的状态 link->visited->hover->active

伪元素选择器
- ::微元素名称
- ::first-letter
- ::first-line
- ::before ——content:’’/url()
- ::after
- ::selection 选中


本文链接: http://www.dtmao.cc/news_show_600100.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?