zoukankan      html  css  js  c++  java
  • css中常用的选择器、样式、盒子模型、定位

    1.CSS声明

                    1、在head标签中使用style标签声明:
    				 		作用:此声明一般声明当前网页的公共样式或者给某个标签的单独样式
    				 2、在标签上使用style属性进行声明:
    				 		作用:此声明会将css样式直接作用于当前标签。
    				 3、在head标签中使用link标签引入外部声明好的css文件
    						作用:此声明相当于调用,解决了不同网页间样式重复使用的问题
    							一次声明,随处使用
    			问题:
    				不同的声明给同一个标签操作了同一个样式,会使用谁的?
    				如果Css的声明全部在head标签中,则遵循就近原则,谁离标签近,谁就会被显示。
                    <!--引入外部声明好的css文件-->
                      <link rel="stylesheet" type="text/css" href="路径"/>

    2.css的选择器

                   标签选择器:
    					标签名{样式名1:样式值1;……}
    					作用:会将当前网页内的所有该标签增加相同的样式
    				id选择器:
    					#标签的id属性值{样式名1:样式值1;……}
    					作用:给某个指定的标签添加指定的样式
    				类选择器:
    					.类选择器名{样式名1:样式值1;……}
    					作用:给不同的标签添加相同的样式
    				全部选择选择器
    					*{样式名1:样式值1;……}
    					作用:选择所有的HTML标签,并添加相同的样式
    
    				组合选择器:
    					选择器1,选择器2,……{样式名1:样式值1;……}
    					作用:解决不同的选择器之间重复样式的问题
    				子标签选择器
    					选择器1 子标签选择器{样式名1:样式值1;……}
    				属性选择器:
    					标签名[属性名=属性值]{样式名1:样式值1;……}
    					作用:选择某标签指定具备某属性并且属性值为某属性值的标签
    			css的使用过程:
    				1、声明css代码域
    				2、使用选择器选择要添加样式的标签
    					根据需求来。
    						使用*选择器来给整个页面添加基础样式
    						使用类选择器给不同的标签添加基础样式
    						使用标签选择器给某类标签添加基础样式
    						使用id、属性选择器、style属性声明方式给某个标签添加个性化样式。
    

    3.css的样式

                       边框设置
    						border:solid 1px;
    					字体设置:
    						font-size:10px;设置字体大小
    						font-family:"黑体";(设置字体的格式)
    						font-weight:bold;设置字体加粗
    					字体颜色设置
    						color:颜色;
    					背景颜色设置
    						background-color:颜色;
    					背景图片设置
    						background-img:url(图片的相对路径);
    						background-repeate:no-repeate;设置图片不重复
    						bacground-size:cover;图片平铺整个页面
    					高和宽设置
    					浮动设置
    						float:left|right
    					行高设置
    						line-height:10;
                    100px;/*设置宽*/
    				border: solid 1px red;/*添加边框及其颜色和大小*/
    				border-radius: 10px;/*设置表框的角度*/
    				background-color: orange;		/*设置背景颜色*/
    				text-align: center;/*设置文本位置*/
    				color: blueviolet;/*设置文本颜色*/
    				font-weight: bold;/*设置文本加粗*/
    				letter-spacing: 10px;/*设置字体间距*/
                   list-style-type:none;/*去除li的标识符*/
                   text-decoration: none;/*设置超链接去除下划线*/
    

    4.css的盒子模型

                       div标签:
    					块级标签,主要是用来进行网页布局的,会将其中的子元素内容作为一个独立的整体存在。
    					特点:
    						默认宽度是页面的宽度,但是可以设置。
    						高度默认是没有的,但是可以设置。(可以顶开)
    						如果子元素设置了百分比的高或者宽,占据的是div的百分比,不是页面的。
    				盒子模型:
    					外边距:margin
    						作用:用来设置元素和元素之间的间隔。
    						居中设置:margin:0px auto;上下间隔是0px,水平居中。
    						可以根据需求单独的设置上下左右的外边距。
    					边框:border
    						作用:用来设置元素的边框大小
    						    可以单独设置上下左右
    					内边距:padding
    						作用:设置内容和边框之间的距离
    						注意:内边距不会改变内容区域的大小
    						可以单独的设置上下左右的内边距
    					内容区域:
    						作用:改变内容区域的大小。
    						设置宽和高即可改变内容区域的大小。
    

    5.css的定位

                       position
    					相对定位:relative
    						作用:相对元素原有位置移动指定的距离(相对的自己的原有位置)
    							可以使用top,left,right,bottom来进行设置。
    						注意:
    							其他元素的位置是不改变的。
    					绝对定位:absolute
    						作用:可以使用元素参照界面或者相对父元素来进行移动 	
    						注意:
    							如果父级元素成为参照元素,必须使用相对定位属性
    							默认情况下是以界面为基准进行移动的。
    					固定定位:fixed
    						作用:将元素固定现在页面的指定位置,不会随着滚动条的移动而改变位置。
    					    以上定位都可以使用top,left,right,bottom来进行移动。
    				    z-index:此属性是用来声明元素的显示级别的。
    

      

  • 相关阅读:
    运算符优先级(图表)
    VNC+SSH相关应用
    VNC常用操作及常见问题解决办法汇总
    操作系统(二): 进程与线程
    Java实现 蓝桥杯 算法提高 01背包
    Java实现 蓝桥杯 算法提高 01背包
    Java实现 蓝桥杯 算法提高 01背包
    Java实现 蓝桥杯 算法提高 判断名次
    Java实现 蓝桥杯 算法提高 判断名次
    Java实现 蓝桥杯 算法提高 日期计算
  • 原文地址:https://www.cnblogs.com/kilig/p/12133520.html
Copyright © 2011-2022 走看看