css基础总结
[TOC]
一、css三种引入方式
1.内嵌式
在head标签中，填写style标签
<head>
<title>内嵌式</title>
<style>
.box{
color: brown;
font-size: larger;
font-weight: 900;
font-style: italic ;
}
</style>
</head>
<body>
<div class="box">内嵌式</div>
</body>
</html>2.外联式
在html文件外的css文件中填写css语法
如：
注意：不写style标签，直接写css语法
.box{
color: brown;
font-size: larger;
font-weight: 900;
font-style: italic ;
}在html中用<link>引入css文件
注意：rel属性与属性值
<head>
<!-- rel的作用式告诉 浏览器 引入的文件是一个样式表 -->
<link rel="stylesheet" href="./css/test.css">
</head>
<body>
<div class="box">外联式</div>
</body>3.行内式
css语法写在标签里的style属性中
<body>
<div style="font-size: larger; color: blue;">行内式</div>
</body>二、标签类别
1.块级元素【display: clock】
独占一行的标签
宽度默认是父元素的宽高，高度默认由内容撑开
可以设置其宽高
如div、p、h1-h6、ol、ul、li、dl、dt、dd、form...2.行内元素 【display：inline】
不独占一行、一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高
如span、a、b,u,strong,em...3.行内块元素 【display：inline-clock】
不独占一行、一行可以多个显示
可以设置宽高
如input，select，textarea ，button....4.特殊情况
img标签具有行内块元素特点，但是在浏览器调试工具中显示结果是inline
5.元素显示类别转换
改变元素默认显示特点，让元素符合布局要求
转换最多的是，a标记转换成块元素 或者行内块元素
三、css属性
常用属性
注意：css属性的属性值 如font-size：400px；
要加单位 px
1.字体属性【font】
font-size: 40px; /*字体大小*/
font-wight: border; /*字体粗细 400px=normal*/
font-style: italic; /*字体样式 如：italic 倾斜*/
/*综合 一般实际开发中都分开写*/
font：style font-wight font-size/line-height font-style；
color: red; /*字体颜色*/
属性 ：
1：red，green pink
2：十六进制 #000; #fff; #ccc; 0<sub>1 a</sub>f
#12edfa; #ff0000;
3:三原色 rgb(0,255,0) 0~255
>2.文本属性【text】
text-align: center; /*文本位置 center 文本居中*/
text-decoration: none; /*文本装饰 none——去掉下划线 line-through——删除线 */
text-indent: 2em; /* 一般用于文本首行缩进 2em 首行缩进两个字符*/
>- 纵轴 行内元素 如a、span,b,u,strong,em...， 行内块元素input，select，textarea ，button....
- 以上元素的文本内容如需使其水平居中，则可直接在其父标签中加入
text-align: center;
line-height 单行文本垂直居中- 块级元素水平居中
margin:0 auto;3.背景属性【background】
background-color: red; /*背景颜色*/
background-image: url('路径'); /*背景图片*/
background-repeat: no-repeat; /*背景平铺 repeat-x——横轴平铺 repeat-y——纵轴平铺 默认repeat 平铺*/
>background-position:水平方向位置 垂直方向位置;
1.方位名词(最多只能表示9个位置) 水平:left center right ; 垂直：top center bottom；
2：数字+px(坐标)
0 0 原点 盒子的左上角
X轴 水平向右 y轴 垂直向下
background-position: 30px 10px;
>background: yellow url(./img/1.jpg) no-repeat 30px 10px;
color image repeat position
>4.外边距【margin】
- 页面中的每个标签都可以看做是一个盒子
- 盒子外就属于margin
margin：10px 15px 20px 25px; /*表示顺序为 上右下左 即顺时针方向*5.边框【border】
- 可以理解为盒子的边框
border: 10px solid red;
border-top: 10px solid red; /*上边框*/
border-right: xxx; /*右边框*/
border-bottom: xxx; /*下边框*/
border-left: xxx; /*左边框*/
border-color: red; /*边框颜色*/
border-width: 10px; /*边框粗细*/
>6.内边距【padding】
- 可以理解为 盒子与盒子里物品之间的 间距
padding: top right botton left;四、编写css语句注意点
1.width、height
width、height默认设置的是盒子的宽高
2.文本居中
注意：
若要是行内元素、或行内块元素内容居中，在其父标签内填写text-align: center;
line-height 单行文本垂直居中
margin: 0 auto; 块级元素水平居中
3.css属性值单位
如 font-size: 10px; 要加上px，只有当属性值为0时可以不加
4.padding填充问题
当运用 padding填充时，盒子会被撑大
所以为了padding填充时 不影响盒子大小，可以在填充padding的盒子标签的css属性中添加
/*自动删减*/
.box{
box-sizing: border-box
}
>5.去除标签默认边距
运用通配符选择器：*{}
/* 项目开始前去除标签自带的边距 */
*{
margin：0；
padding：0；
}
