【前端技术】CSS基本语法篇

一、 CSS语法

 /*  
        单行文本展示形式： 
            让标签失去换行功能：white-space:nowrap; 
            让文本溢出部分不展示 ：overflow:hidden;
            溢出部分采用'…'展示：text-overflow:ellipsis;
         
        多行文本展示形式： 
            首先必须先算好容器的高度，如： Height:100px;
            当你要展示五行文本时，那么行高就应该是20px，如： line-height:20px;
            再加上一个文字溢出不展示，如： Overfloe:hidden;
        图片代替文字： 
            方法一： 
                text-indent:200px;
                white-spare:nowrap;
                overflow:hidden;
            方法二：
                容器高位height:90px;
                加上一个padding-top：90px;
                把原本的height:90px变为height:0px;
                再加上overflow:hidden溢出不显示;

        注：行级元素只能嵌套行级元素，块级元素可以嵌套任何元素，p标签不能嵌套块级元素，a标签里面不能嵌套a标签
            */

 /* 背景图片展示方式：  */
 div {
     width: 200px;
     height: 200px;
     /* 设置边框线，1px，solid:实线，边框颜色黑色 */
     border: 1px solid black;
     /* 图片地址 */
     background-image: url(123.jpg);
     /* 图片大小设置 */
     background-size: 100px 100px;
     /* repeat：重复展示，no-repeat：不重复展示 ，repeat-x：x轴重复，repeat-y：y轴重复*/
     background-repeat: repeat/no-repeat;
     /* 在x轴和y轴指定像素点展示 left top（左上）left bottom（左下）left center（左中），其余位置按照这个写法即可，也可以使用百分数展示 */
     background-position: 100px 100px;
 }

 div {
     /* 字体大小为12像素， font-size:属性名，12px：属性值，浏览器默认大小是16像素，一般企业开发都是采用12px/14px，
             很少用到默认大小，除非是用到放大字体时，任何编程软件设置的字体大小都是字体的高 */
     font-size: 12px;
     /* font-weight:normal;默认值，bold：加粗 lighter：细体 bolder：
            比加粗更粗一点 也可以在其中写100-900：表示字体的粗细，字体·能加到多粗取决于字体包中有没有更粗的字体 */
     font-weight: bold;
     /* italic：斜体 */
     font-style: italic;
     /* 字体设置，arial网页中基本都使用的字体（互联网网站通用的字体），可以采用css3手册查询其余属性值用法 */
     font-family: arial;
     /* 设置颜色有三种方法：
				1.纯英文单词（在正常企业级开发严禁采用此种写法，除测试时）
				2.颜色代码（企业级开发采用）
					三原色有两种：
						1.光学三原色——r、g、b（红00-ff、绿00-ff、蓝00-ff）由十六进制组成（#ff4400）每两位代表一个颜色（#000000代表黑色、#00ffff代表青色、#ffffff代表白色 三原色可以简写，由于每两位相同，可以简写为#fff）
						2.颜料三原色（CMYK）：品红、黄、青(天蓝)、黑，色彩三原色可以混合出所有颜料的颜色，同时相加为黑色，黑白灰属于无色系。
				3.颜色函数
					rbg（0-255.0-255，-0-255）rbg函数由0-255组成是十进制数，在rbg（ ， ， ）填入0-255任意数即可 */
     color: rbg(234, 256, 246);
     /* Border: 1px solid black;这个可以拆开来写，原本是border:boredr-width border-style border-color*/
     order: 1px solid black;
     /* 设置边框线宽度 */
     border-width: 5px;
     /* 给div（或者说是容器）加上边框，边框像素为1，颜色黑色,solid表示实体，dotted表示点状虚线,dashed表示条状虚线 */
     border-style: solid/dotted/dashed;
     /* 设置边框线颜色 */
     border-color: red;

     width: 100px;
     height: 100px;
     border: 1px solid black;
     /* left：左边框线为红色 ， */
     border-left-color: #fff;
     /* top：上边框线为绿色  */
     border-top-color: #0f0;
     /* right：右边框线为蓝色 */
     border-right-color: #00f;
     /* bottom底部为透明色 
            利用boredr可以画出三角形，那一边需要三角形展示，其余边用透明色代替即可，每条边都可以单独拆解开来写属性/属性值
            */
     border-bottom-color: transparent;

     /* text-align表示的是对齐方式的属性，
            属性默认值是left：左对齐，center：居中显示，right：右对齐显示*/
     text-align: left/center/right;
     /* 设置单行文本高度为16像素，16像素将是浏览器本身的默认字体大小 ，
            单行文本垂直居中方式：文本所占的高度（line-height:200px）=容器所占的高度（height:200px;）*/
     line-height: 16px;
     /* 文本缩进2个字 在单位中（如：m、nm这些是绝对值）而（如：px、em，本身实际大小可大可小则是相对值）
						1em = 1 font-size =16px（其实也就是在css代码中font-size的值，font-size的值等于30px/50px，那么1em也就是等于这个font-size的值）*/
     text-indent: 2em;
     /*
    	垂直对齐方式
     		baseline：基线对齐，默认为这个
     		top：顶部对齐
     		middle：居中对齐
     		bottom：底部对齐
     */
     vertical-align:middle;
     /*过渡属性*/
     transition:all 1s;
     /*设置透明度*/
     opacity:0.8;
     /*
     光标类型
     	default：默认值，通常是箭头
     	pointer：小手效果，提示用户可以点击
     	text：工字形，提示用户可以选择文字
     	move：十字光标，提示用户可以移动
     */
     cursor:pointer;
 }

 a:hover {
     background-color: #f40;
     /* 这个伪类选择器一般是当鼠标移动到a标签区域类时产生效果 */
     text-decoration: underline;
     color: #fff;
     font-size: 16px;
     font-weight: bold;
     font-family: arial;
     /* 圆角为10px */
     border-radius: 10px;

 }

 #look {
     /* 设置超链接颜色 */
     color: rbg(0, 0, 238);
     /* Text-decoration：文本装饰
				 line-through：删除线/中划线样式属性值
				 none：表示没有线（将原有的钱去除掉）
				 underline：表示下划线
				 Overline：表示上划线
									*/
     text-decoration: line-through;
     /* 光标定位值
					poinder：表示将鼠标移动到文本上后变成了一个‘小手’的手势
					help：表示将鼠标移动到文本上后变成了一个‘问号’的手势
					e-resize：表示将鼠标移动到文本上后变成了一个‘边框拖拽’的手势
					W-resize：表示将鼠标移动到文本上后变成了一个‘上下拖拽’的手势
					其余属性值使用css3手册查找即可（css88.com）
					*/
     cursor: pointer;

 }

 a {
     /* font-style:normal;初始化标签功能，将所有自带的属性值都去除 */
     font-style: normal;
     color: #f40;
     /* 添加透明度 */
     opacity: 0.5;
 }

 * {
     padding: 0px;
     margin: 0px;
     text-decoration: none;
     list-style: none;
     /* 设置列表项目相关内容*/
 }

二、 盒子模型

盒子三大部分（组成）：

• 盒子壁：border

• 外边距：margin

• 内边距：padding

• 盒子内容：width+heigth

盒模型也就是：

​ Margin + padding +（content = width + height）

​ 外边距 + 内边距 +盒内容

/* 注：**margin和padding/border-width**的属性值设置方法一样，无差别 */
* {
    /* padding属性的属性值是按顺时针排序的（上（100px） 右（150px） 下（200px） 左（250px）） */
    padding: 100px 150px 200px 250px;

    /* padding三个值时代表的是上左右下，其中左右共用150px */
    padding: 100px 150px 200px;
    /* padding两个值时代表上下（100px）左右（150px） */
    Padding: 100px 150px;

    /*  padding一个值时代表四个方向上下左右都为100px padding单独设置属性值： 
    ​一、padding-top: 100px;上面外边距为100像素 ​ 
    二、Padding-left: 100px;左面外边距为100像素 ​ 
    三、Padding-right: 100px;右面外边距为100像素 */
    Padding: 100px;


}

#三、 浮动模型

float:left/right：左/右浮动

float元素站队边界是父级的边界，当一个容器一行能排4个时就是排四个，而能排三个半时只排三个

• 浮动元素产生了浮动流

  • 1.所有产生浮动流的元素，只有块级元素看不到他们

  • 2.产生了BFC的元素和文本类属性元素（inline）以及文本都能看到浮动流

  • 3.clear:both/left/right;清除浮动流

• 在父元素最后加上一个块级标签设置css属性

  • clear:both

• 双伪元素清除浮动

div::before，
div::after{
    content:"";
    display:table;
}
div::afte{
    clear:both;
}

• 利用伪元素清除浮动

div::after{
    content:"";
    clear:both;
    display:block;

}
/* 在伪元素选择其中，必须要有content这个属性，伪元素才会生效，能清除浮动的必须是块级元素 

做报纸效果只需有在css元素中加上一个浮动（float:left;）就能够很好的展现出来

注：凡是设置了position:abolute;float:left/right;浏览器内部会自动把标签转换成行级块元素（inline-block）*/

• overflow清除浮动
  • 在父元素添加overflow属性