• day36_Css


    • Css样式
    • Css样式的种类
    • 选择器
    • 文本相关样式
    • 背景相关样式
    • 边框
    • 盒子模型
    • 标准流static
    • 浮动流float
    • 定位流position

    标签由三部分构成

    ​ 1.标签名

    ​ 2.标签的属性值

    ​ 3.标签的文本内容

    select标签

    ​ 下拉列表标签,常用于单选或多选,是一个组合标签,需要和子标签option一起搭配使用,不会独占一行

    常用属性:

    • ​ name属性:发送给服务器使用的
    • ​ multiple属性:不写默认单选,取值为multiple表示多选,一般使用单选
    • ​ size属性:可见选项的数目

    option标签

    ​ selected属性:表示勾选当前选项

    ​ value属性:用于发送给服务器的选项值

    注意:

    ​ 1.如果使用多选,那么选择的时候,需要按下ctrl键进行选择

    ​ 2.size属性一般情况下不设置

    ​ 3.selected属性如果不设置,默认显示的是列表中第一个选项

    ​ 4.value属性,如果不设置,发送给服务器的值是option的文本值

    ,设置了value属性值,那么发送过去的就是value值,一般情况都需要设置

    textarea标签

    ​ 文本域,用于多行输入文本信息

    • ​ name属性:用于发送给服务器的名称
    • ​ cols属性:文本域列数 (文本域框的尺寸)
    • ​ rows属性:文本域的行数(文本域框的尺寸)

    CSS样式

    ​ 进行页面美化和布局控制

    概念:cascading style sheet层叠样式表

    ​ 层叠:多个样式作用在同一个html元素上,可以同时生效

    好处:

    • ​ 功能比较强大
    • ​ 降低了程序耦合度,将内容展示和样式控制分离,分工协作更加方便,CSS样式可复用性高
    	<!--使用:-->
    	<style type ="text/css">
            选择器{
                属性1:属性值;
                属性2:属性值;
                属性3:属性值1 属性值2 属性值3...;
                ...
            }
    	</style>
    

    注意:

    1. ​ 选择器严格区分大小写,属性和属性值不区分大小写,属性与属性之间使用分号隔开,最后一个属性可以省略不写。如果一个属性有多个属性值,多个属性值之间空格隔开,type属性可以省略不写。
    2. ​ 如果一个标签有多个css样式控制,按照就近原则进行覆盖。
    3. ​ css样式的种类,三种:行内样式 > 内联式 > 外联式。
    选择器

    ​ 当我们想要设置某些标签样式时,就必须让css代码找到对应的标签,通过选择器可以找到对应的标签

    常用选择器
    1. ​ 标签选择器,语法格式: **标签名称{ } **如:对div标签控制,---> div{ }
    2. ​ id选择器,语法格式:#id名称{ } ,id一般不能重复,需要给标签添加一个id属性
    3. ​ 类选择器,语法格式:.class{ },class可以重复,需要给标签添加class属性
    4. ​ 并集选择器,语法格式:选择器1,选择器2,...{ }
    5. ​ 属性选择器,语法格式:标签[属性="具体的属性值"]{ },如:input[ type="text"]--->对用户输入框进行设定 || input[ type="password"]--->对密码输入框进行设定
    不太常用的选择器

    ​ 后代选择器,语法格式:选择器1 选择器2{ }浏览器加载样式时,会首先找选择器1对应的标签存在与否,如果存在,继续寻找选择器2对应的标签。

    ​ 子元素选择器,语法格式:选择器1 > 选择器2{ }浏览器会加载选择器1下的所有子元素符合选择器2的条件

    ​ 交集选择器,语法格式:选择器1选择器2{ }要求标签同时具备选择器1和选择器2,css才会生效

    ​ 相邻兄弟选择器,语法格式:选择器1+选择器2{ }

    ​ 通用兄弟选择器,语法格式:选择器1~选择器2{ }

    ​ 选中同级别的第一个标签,语法格式:标签:first-child{ }

    ​ 选中同级别中同类型的第一个标签,语法格式:标签:first-of-type{ }

    ​ 选中同级别第几个标签,语法格式:标签:nth-child(n){ }

    ​ 选中同级别中同类型的第几个标签,语法格式:标签:nth-of-type(n){ }

    文本系列样式

    ​ 用于设置文本相关的一些样式

    • font-style:设置文字样式,常用取值为斜体(italic)和普通(normal
    • font-weight:设置文字粗细,常用取值为lighter,light,bold,bolder,还可以使用数字进行表示 100-900
    • font-size:设置字体大小,取值默认单位为px
    • font-famliy:设置字体样式 如" 宋体"、'微软雅黑'
    • font:可以连写,使用一个属性设置多个属性值,如:font:20px italic bold "宋体";
    • text-decoration:文本装饰,常用取值为 none、underline、overline、line-through
    • text-align:水平方向对齐方式,默认左对齐 常用取值 left right center
    • text-indent:缩进方式,em为缩进单位,2em相当于往里缩进2个文字的宽度
    • color:设置文字的颜色,英文单词 / rgb / #xxxxxx

    背景系列样式

    ​ 设置标签的背景相关样式

    • background-color:设置标签背景颜色
    • background-image:设置背景图像,它的属性值语法格式:url(相对路径);自动平铺
    • background-repeat:设置平铺方式,repeat默认值、no-repeat不平铺、repeat-x水平平铺、repeat-y垂直平铺
    • background-position:设置背景图像定位方式,格式为:水平方向数值 垂直方向数值;水平方向:left、center、right;垂直方向:top、center、bottom,也可以是具体的像素值 如:100px 100px
    • background-size:设置背景图像的尺寸大小,尺寸大小可以使用百分比,也可以使用具体的像素值
    • background-attachment:设置背景关联方式,scroll(会随着滚动条的滚动而滚动)和fixed(不会随着滚动条的滚动而滚动)
    • background:可以连写,如 background:

    边框系列样式

    ​ border属性,也可以连写 格式:宽度、样式、颜色、边框倒角radius:边框四角的弧度

    盒子模型

    padding:内容到边框的距离叫做内边距,内边距属性按照上右下左进行设置,也可以分开设置,改变内边距的宽高会影响元素的大小

    margin:元素边框与元素边框之间的间距就是外边距,设置的顺序也是上右下左,如果我们设置margin的值为:0 auto 就代表距离上方边框为0像素远,距离左右两边为水平居中

    盒子模型的构成(border-box):

    ​ 元素的宽度:左边框 + 左内边距 + 内容宽度 + 右内边距 + 右边框

    ​ 元素的高度:上边框 + 上内边距 + 内容高度 + 下内边距 + 下边框

    ​ 元素空间的宽度:左边的外边距 + 元素的宽度 + 右边的外边距

    ​ 元素空间的高度:上边的外边距 + 元素的高度 +下边的外边距

    *{
    	box-sizing:content-box; //设置上边距时,会扩大盒子高度
    	box-sizing:border-box //设置上边距时,不会扩大盒子高度
    }
    

    如果我们采用的是内容盒子content-box,那么设置内边距后,内容宽高不会发生改变,但元素的自身宽高也会发生改变

    但是如果我们设置盒子模型border-box,那么设置内边距后,元素自身宽高不会发生改变,但内容宽高会发生改变

    如果相邻元素对彼此方向设置外边距,自动取较大值

    标准流

    1. ​ Html标签被分为两种类型,一种是块级标签(独占一行,能够设置宽高),另外一种是行级标签(不独占一行,一般不能设置宽高)
    2. ​ 这两种类型的标签都是按照标准流的方式进行渲染加载的(排列),行级标签从左到右加载,块级标签从上到下加载
    display:

    ​ 常用取值:inline(行级元素)、block(块级元素)、inline-block(行内块元素)、none(隐藏,不占空间)

    浮动流

    ​ 设置标签属性float,能够让元素向左或者向右进行浮动(无上下浮动),如果元素按照浮动流渲染,那么该元素会脱离标准流,在浮动流中没有行级元素和块级元素之说。但是都可以设置宽和高

    ​ 在标准流加载方式下,如果更改标准流为浮动流·,那么该元素后面的元素会相应的顶上来

    ​ 如果按照浮动流进行加载,在浮动流加载的情况下,元素之间是紧邻排列的,中间没有空隙

    clear

    ​ 设置clear属性,能够使元素在浮动的过程中不区紧贴其它标签,它只能影响自己,不能影响其它元素

    定位流

    相对定位

    不会脱离标准流。相对于在标准流的位置进行位置移动,所以下边的元素不会再顶上来
    属性position设置值为 relative   结合top/left/right/bottom进行空间位置移动
    

    绝对定位

    会脱离标准流。下边元素会顶上来,相对于在标准流的位置上进行空间移动
    属性position设置值为absolute    结合top/left/right/bottom进行空间位置移动
    如果它的父元素或者是祖先元素都没有设置定位流(相对/绝对/固定定位),绝对定位相对于body定位。
    如果它的父元素或者是祖先元素设置了定位流,绝对定位相对于父元素或祖先元素(就近原则)。
    在绝对定位中,不区分块级元素和行级元素,但都可以设置宽高。   
    

    定位流中,一般采用父相(相对定位)子绝(绝对定位)的方式 ,子标签始终参照父标签进行相对定位移动

    固定定位

    固定定位也会脱离标准流,设置position为fixed,依然需要借助于四个方向属性top/left/right/bottom四个属性进行空间移动,依然不区分行级元素和块级元素。
    和绝对定位一样,唯一的不同是它不会随着滚动条的滚动而发生移动
    

    z-index

    ​ 可以改变定位流中的前后加载顺序

    定位流中有以下规律:

    1. ​ 默认情况下定位流会覆盖标准流
    2. ​ 默认情况下,后加载的会覆盖前面加载的
    3. ​ 定位流中,设置z-index(数值)这个值谁的大,谁先加载
    4. ​ 如果父元素设置z-index,子元素的z-index就会失效
    5. ​ 谁的父元素大,谁就显示在上方(从父原则)

    JavaScript概念的介绍

    ​ JavaScript是一门web上的编程语言,用于和用户进行交互,不需要进行编译,嵌套在html文件中由浏览器引擎加载执行,和Java没有大的联系。

    JavaScript的组成
    1. ​ 核心(ECMAScript)语法,包括基本的流程控制、运算符、数据类型、数组、对象、类、接口等
    2. ​ 浏览器对象模型(BOM)browser object model,主要是操作当前浏览器窗口的内容,如页面的跳转和页面刷新等动作
    3. ​ 文档对象模型(DOM)document object model,主要是操作html文件中具体的内容(页面元素内容),如页面中有一个div,动态的给div添加高和宽、背景图像、植入文本内容等
    JavaScript代码的引入
    • ​ 内嵌式

      在html文档中,将相关的js代码直接放在标签

  • 相关阅读:
    CSS清除浮动的方法
    JS获取元素属性、样式getComputedStyle()和currentStyle方法兼容性问题
    数据类型真假的问题
    数据类型——方法总结(可能有不对的)
    attr()与setAttribute()的区别
    wampserver 2.5多站点配置
    php常用函数(持续中)
    php中环境变量
    编码转换
    php中rsa加密及解密和签名及验签
  • 原文地址:https://www.cnblogs.com/mitoris/p/14213963.html
Copyright © 2020-2023  润新知