代码小白的日常笔记css篇<1>

204 阅读3分钟

Css2022.1.4

  1. -- css(cascading style sheet) 中文译为层叠样式标,她用于控制网页样式并允许将样式与网页内容分离的一种标记性语言。
  2. -- 行内样式:直接对html的标记使用style属性,然后将css代码直接写在其中。
  3. p style="color:#ff0000;font-size:30px;text-decoration:underline;"正文内容/p
  4. --内嵌样式:将css写在head,/head之间并用style,/style标记声明。
  5. --链接式:将html和css分离成2个或多个文件,通过链接嵌入。
  6. link href="a.css" type="text/css" rel="stylesheet"
  7. --导入样式:在html文件初始化时,会被导入到html文件内,作为文件的一部分,类似内嵌式的效果。
  8. --style
  9.    @import url(a.css)
    
  10.     @import url("a.css")
    
  11.     @import   a.css
    
  12.      @import "a.css"
    
  13.      @import "a.css"
    
  14. --style
  15. --样式的导入方式:先显示行内>内嵌>导入>link
  16. link用到它的样式时才会加载,导入import用不用都加载,所有我们在使用时link比导入import多一些。
    
  17. 行内的优先级高于link
    
  18. --标记选择器
  19. 一个html页面由很多不同的标记组成,而css标记选择器就是声明哪些标记采用哪种不同的css样式(页面所有标记都会产生变化)
    
  20. 名字是标记名、属性、值、例:h{font }
    
  21. --类别选择器
  22. 名称可以由用户自己定义,符合css样式规范(可以在html页面重复调用)
    
  23. .class(名称){}点后加名称,用clss=类名调用后才生效
    
  24. 例:.a{
    
  25.               color:#f00;
    
  26.                font-size:20px;
    
  27.                  }
    
  28. --ID选择器
  29. 方法和类别选择器相同,但是只能在html中调用一次
    
  30. id选择器只使用一次,给js使用,优先级高于class
  31. --集体声明
  32.     如果某些选择器的风格是完全相同或部分相同可以使用
    
  33.         h1 h2 h3 h4 p{ color:purple;
    
  34.                               font-size:15px;}
    
  35. --嵌套声明:
  36. ----P b{color:#f00;fontsize:30px}
  37.   继承:子继承父的属性,如果有冲突,将先按照子属性显示。
    
  38.  p>b{color:#f00;}父子关系
    
  39. --全局声明:
  40. *{color:purple;font-size:15px;}
    
  41. --组合声明:
  42.   p.color{color:#f00;}
    
  43. --盒子模型:margin-top(外(green)
  44.                  border-top(边框(yellow)
    
  45.                  padding-top(内补丁)(white)
    
  46.                  content内容(文本、音频视频)(pink)
    
  47.      兼容性:ie6、7、(8分版本,盒子模型向内收缩,盒子模型向外扩张实际宽度=width+margin
  48.     其他浏览器盒子实际高度=content+width+padding+border+margin
    
  49.    内容(content):包含两个属性,width宽度,height高度,(只兼容块级元素,和标记本身widthheight属性的标记)
    
  50. --content可以由width和height控制大小
  51. --border有三个属性
  52. color:设计方法和文字设计方法用一样
    
  53. width:可以设为thin、medium、thick、length,其中length表示具体的数值,medium默认为2px
    
  54. --style
  55.  可以设为none、hidden、dotted(点线)、dashed(虚线)、solid(实线)、double(双线)、groove、ridge、inset、outset,其中none和hidden都不显示border