欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

PHP笔记(CSS篇)

程序员文章站 2022-06-12 21:28:26
...
HTML常用于在网页中显示内容,当然,还可以是布局,但是比较不方便,所以,引进了CSS

CSS全称Cascading Style Sheets,中文名:层叠样式表

帮助文档:CSS.chm

作用:布局和美化网页

特点:

  • 和HTML一样,是一种标记语言,可以由浏览器直接执行
  • 大小写不敏感
  • CSS文件是一个文本文件,后缀名为css
  • 嵌套在HTML中使用
  • Css规则

  • 语法
  • CSS定义由选择器(selector)、属性(property)及属性值(value)组成;
  • 格式:selector{property:value;}
  • 选择器包括
  • 类型选择器:
  • 定义:HTML标签
  • 使用:直接使用标签
  •         

    定义                          使用

  • class选择器:
  • 定义:标记名.类名 或 .类名
  • 使用:class="类名"
  • 标记名为html标签,“标记名.类名”表示只有使用该标签并class值为该类名时,才使用该选择器;
  • “.类名”表示只要class值为该类名,就会使用该选择器
  •         

    定义                        使用

  • id选择器:
  • 定义:标记名#id值 或 #id值
  • 使用:id="id值"
  • 标记名为html标签,“标记名#id值”表示使用该标签并id为该值时,才使用该选择器
  • “#id值”表示只要id为该值,就会使用该选择器
  • 同一页面id值是唯一的(是的,如果同一页面有两个相同的id,样式也能显示出来,但是这样有违逻辑,并且 将来使用js调用id时,会出现混乱)
  •                

    定义                        使用

  • 包含选择器:
  • 多种选择器的层次组合,选择器用空格隔开,各选择器由左到右,为包含关系
  • 定义:各选择器符组合,用空格隔开
  • 使用:各选择器嵌入使用
  • 层数不限,但建议不要太多,影响维护和seo
  •             

    定义                      使用

  • 群组选择器:
  • 同时定义多个选择器为同一属性
  • 定义:各选择器组合,用","分隔开
  • 使用:各分隔符直接使用
  •           

    定义                    使用

  • 伪元素选择器:
  • 对html元素不同状态的一种定义方式
  • 定义:标签:伪元素
  • 使用:该标签的不同状态使用不同属性
  •         

    定义                              使用

  • 属性与属性值用":"分隔开,多个属性值用";"分隔
  • 注释
  • 格式:/*.......*/
  • 长度单位
  • 相对单位(常用)
  • px:像素
  • em:相对于当前对象内文本的字体尺寸
  • %:百分比
  • 绝对单位(不常用)
  • pt:点
  • cm:厘米
  • mm:毫米
  • 颜色单位和URL值
  • 颜色:
  • #rrggbb
  • #rgb
  • rgb(x,x,x)(不常用,浏览器不兼容)
  • rgb(x%,x%,x%)(不常用,浏览器不兼容)
  • URL
  • 表示:url(address)
  • HTML中使用CSS的方式

  • 内联样式表
  • 直接在标签中使用
  • 使用style属性,嵌入css键值对
  • 使用灵活,但失去了CSS的作用
  • 内嵌样式表
  • 标签中,使用
  • 将要使用的CSS样式写在
  • 或者
  • 外部链接样式表
  • 外部链接css文件,文件中直接输入css内容
  • 优点:
  • 使用外接的css文件,浏览器带有缓存功能,不用每次都下载
  • 多个文件共享
  • 使用标签引入HTML中,格式为
  • 三种格式的优先级,就近原则:内联式>内嵌式>外链式

    内联元素与块级元素

  • 内联元素
  • 标签中的内容都在同一行,不会自动换行
  • 不可设置宽和高
  • 块级元素
  • 标签中的内容会自动换行
  • 可设置宽和高
  • CSS字体属性

  • 多属性写在同一行,用复合属性,顺序必须为 [[ || || ]? [ / ]? ],为必选项。
  • 单属性分开写
  • 属性:设置字体是否为斜体,默认值为normal;
  • 属性:设置字体是否为小型的大写字母,默认值为normal;
  • 属性:设置字体粗细,默认值为normal;
  • 属性:设置字体大小,常用单位为"px"或"%",默认值为normal;
  • 属性:设置字体,可设置多种字体,用“,”隔开,浏览器会按顺序检索是否存在该字体以显示,字体名称为中文时,要用单引号引起。默认值根据浏览器选择。
  • 属性:设置字体宽度,默认值为normal;
  • CSS背景属性

  • 多属性写在一行,使用复合属性,属性值为[ background-color ] || [ background-image ] || [ background-repeat ] || [ background-attachment ] || [ background-position ],其他参数不填时,默认无条件覆盖。
  • 单属性分开写
  • :设置背景色,默认为transparent;
  • :设置背景图片,用"url()"设置图片路径;
  • :设置背景图片填充效果,默认为repeat;
  • :设置背景图片的填充位置,默认值为"0% 0%",常用单位"%"和"px"。
    小技巧:可设置一个区域的属性,属性可填充该区域,如作为导航条等;属性可分别截取图片一部分,分开现实,减少网页加载时间。
  • CSS文本属性

  • :设置字符间距,允许使用负值,默认值为normal
  • :设置单词间距,允许使用负值,默认值为normal
  • :向文本添加修饰,underline下划线,overline上划线,line-through删除线
  • :水平对齐方式,centen居中,right右对齐,left左对齐
  • :设置对象行高,当行高与区域高度相同,文本垂直居中
  • :设置文本缩进,单位可为em(字符)、px(像素)、%(百分比)
  • :设置字体颜色
  • CSS边框属性

  • 多属性合并写,使用复合属性,属性值顺序为[ border-width ] || [ border-style ] || [ border-color ]
  • :设置左线、右线、上线、下线的属性,属性值顺序为[ border-width ] || [ border-style ] || [ border-color ]
  • 单属性分开写
  • :设置边框样式,常用dotted(点状)、dashed(虚线)、solid(单实线)
  • :设置边框宽度,不允许为负数,属性设为none,本属性失去作用
  • :设置边框颜色
  • CSS列表属性

  • :设置列表项的标记为预设标记
  • :设置列表项的标记为自选标记,“url()”设置标记的地址
  • :设置表项在文本的位置,outside表示标记放置在文本以外,inside表示标记放置在文本以内
  • DIV+CSS页面布局

  • 优势:
    1. 内容与布局分离
    2. 代码简洁,提高页面浏览速度
    3. 易于维护和修改
    4. 提高搜索引擎对页面的索引效率
  • div和span
  • div:块级元素,会自动换行,能设置宽高
  • span:内联元素,不会自动换行,不能设置宽高
  • W3C盒子模型

  • maigin:外补白(盒子四边的外延申边距)
  • maigin:可使用1~4个参数来设置外补白大小
  • maigin-top、maigin-right、maigin-bottom、maigin-left:分别设置盒子上、右、下、左外补白大小
  • border:边框
  • border:可使用1~4个参数来设置边框宽度
  • border-top、border-right、border-bottom、border-left:分别设置盒子上、右、下、左边框大小
  • padding:内补白(盒子内容与边框的距离)
  • padding: 可使用1~4个参数设置内补白大小
  • padding-top、padding-right、padding-bottom、padding-left:分别设置盒子上、右、下、左内补白大小
  • DIV定位

  • position:设置定位方式,参数为static、absolute、relative、fixed
  • absolute:绝对定位,位置相对于文档流,会脱离文档流
  • relative:相对定位,位置相对于自己原来的位置,不会脱离文档流
  • fixed:固定定位,位置相对于浏览器窗口
  • 绑定模式:父层使用"relative"定位,子层使用"absolute"定位,子层将于父层“绑定”,子层的位置不再相对于文档流,而是相对于父层
  • top:盒子与顶部的距离
  • right:盒子与右边的距离
  • bottom:盒子与底部的距离
  • left:盒子与左边的距离
  • z-index:设置层叠顺序,默认以0开始,可为负数
  • text-align:水平对齐方式,centen居中,right右对齐,left左对齐
  • line-height:设置对象行高,当行高与区域高度相同,文本垂直居中
  • float:设置对象为浮动效果
  • 只会水平浮动,不会不会垂直浮动
  • 会脱离文档流
  • 多个对象同时设置为浮动时,各对象并排显示
  • left:左浮动
  • right:右浮动
  • clear:清除浮动
  • right:清除右浮动,对象右边不能存在浮动对象
  • left:清除左浮动,对象左边不能存在浮动对象
  • both:清除两边浮动,对象两边不能存在浮动对象
  • DIV的显示

  • display:设置元素显示发方式
  • block:以块级元素方式显示
  • inline:以内联元素方式显示
  • none:隐藏该元素,隐藏后,不占用位置
  • visibility:设置嵌套关系的显示
  • inherit:显示属性与父层相同,父显子显,父隐子隐
  • visible:无论父层是否显示,子层依然显示
  • hidden:无论父层是否显示,子层均隐藏且占用位置
  • overflow:内容超出边界时的显示方式
  • auto:自动处理,超出时显示滚动条,未超出则不显示
  • scroll:始终显示滚动条,无论是否超出
  • visible:超出也直接显示,不做处理
  • hidden:超出部分隐藏,不显示滚动条
  • 相关标签: PHP笔记(CSS篇)