css基础

liuchonghua

于 2018-03-28 17:37:31 发布

阅读量317

点赞数

分类专栏：网页前端文章标签： css入门

本文链接：https://blog.csdn.net/liuchonghua/article/details/79730999

版权

网页前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css入门

css的调用方式

<html>
    <head>
        <meta charset="utf-8"/>
        <title>css入门</title>
        <style type="text/css">
        #id1{
           font-size: 30px;
           color: #770077;
            }
        </style>
/*css的内部样式的定义方式，需要在head内添加一个style标签，typs设置为css文本样式，然后在style内写css样式*/     
<link rel="stylesheet" type="text/css" href="css/01.css"/> 
/*外部样式调用方式，需要事先在项目内css文件夹内建一个.css的文件然后调用外部css文件*/ 
/*外部css文件直接开始写样式不需要加style标签*/     
	</head>
    <body>
        <div id="id1">样式一</div>
    </body>
</html>

还有一种行内css样式定义方法，直接在div标签内写style属性，因为不便于维护和管理所以不用。

选择器

css内部样式和外部调用样式需要给<div> </div>标签设置id选择器或class选择器。

一个div只能设置唯一的id选择器。

class选择器可以给多个不同的div设置。

一个div可以同时设置id选择器和class选择器，当两个选择器设置相同的属性的时候id选择器优先。

/*设置样式时候id选择器用#+id名*/
#idname{
    color: #770077;
        }
/*设置样式时候class选择器用.+class名*/
.classname{
     color: #CCCCFF;
           }

其他选择器

/*标签选择器*/
/*可以为一个标签下所有元素定义样式*/
	li{}
	p{}
/*并集选择器*/
	#div1,.cls1{}			
/*交集选择器*/
	#div1 span{}
/*通用选择器	*/
/*可以选中所有元素定义样式*/
	*{}

伪类选择器

<html>
	<head>
		<meta charset="utf-8"/>
		<title>css入门</title>
		<style type="text/css">
			a:link {color: #FF0000}	        /* 未访问的链接 */
			a:visited {color: #00FF00}	/* 已访问的链接 */
			a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
			a:active {color: #0000FF}	/* 选定的链接 */
		</style>
	</head>
	<body>
		<a href="#">链接</a>
	</body>
</html>

伪类选择器可以定义元素的四个状态，可以单独设置，如果设置多条必须按代码中的顺序来定义。

伪类选择器可以给其他元素定义不一定是链接。

div盒子模型

div相当于一个盒子，通过一个一个盒子将网页划分成独立的模块。盒子模型有以下几个属性：

#div01{
	width: 100px;/*定义盒子的宽度*/
	height: 100px;/*定义盒子的高度*/
	border-color: #0f0;/*边框的颜色*/
        border-width: 5px;/*边框的厚度*/
        border-style: solid dashed dotted double;
        /*边框的样式 实线、长虚线、短虚线，双层*/	
        border-radius:4px;/*定义边框的圆角*/
	padding: 10px 10px 10px 10px;/*定义内边距*/
	margin: 10px 10px 10px 10px ;/*定义外边距*/
 }

width属性不定义的话默认盒子宽度是占满当前页面宽度。

height属性不定义的话默认高度随内容变化。

padding盒内边距，可以设置上下左右四个方向可以单独用

                padding-top: 10px;
               padding-right: 10px;
               padding-bottom: 10px;

padding-left: 10px;

来设置，也可以简写成 padding: 10px 10px 10px 10px;四个值按上右下左顺时针的顺序设置。

可以只写两个值，只写两个默认第一个代表上下，第二个代表左右。

也可以只写一个，表示四边均为一个值。

padding的设置不会改变盒模型的容积，会将盒模型的面积放大。相当于是内容跟边框之间的距离。

如果盒模型定义了背景颜色padding部分会显示背景颜色

margin四个值同padding设置一致。

当父div有固定宽度的时候，margin左右同时设置为auto可以将盒模型居中

margin部分是透明的会显示父div的背景颜色。

当两个垂直相邻的div相邻边同时设置了margin的值，两个值会合并成较大的一方。

当父div没有设置padding-top，父div内第一个子div的margin-top值会合并到父div内导致父div有一个margin-top。

border也可以像padding一样的方式单独设置四个边的厚度和样式。

表单的文本框和按钮可以看成特殊的盒模型，可以设置长宽，padding和margin。

border-radius:4px;可以设置边框的圆角，可以对表单的文本框和按钮起效。

css背景

background-image: url(img/1.jpg);/*定义盒子模型的背景图片*/
background-repeat: no-repeat;/*定义背景图片的重复方式*/
    /*有四个值默认为平铺*/
    /*repeat-x:背景图片水平方向重复*/
    /*repeat-y:y轴重复*/
    /*no-repeat:不重复*/
background-position: top top;/*定义图片的起始位置 */
    /*第一个值为图片显示的位置可以为top,content,botto.*/
    /*第二个值为图片在浏览器中的位置可以设置为left,center,right.*/
background: #0f0 url(img/1.jpg) no-repeat top top;
    /*也可以按以上顺序简写*/

css文本

color: #00FF00;/*文本颜色*/
line-height: 10px;/*行高*/
letter-spacing: 10px;/*字间距*/
text-align: center;/*对齐方式*/
word-spacing: 10px;/*词间距,默认两个字为一个词*/
text-decoration: underline;/*下划线*/
    /*none	没有*/
    /*overline	上划线*/
    /*line-through	中划线*/
font-family: "微软雅黑";/*字体*/
font-size: 10px;/*字体大小*/
font-style: italic;/*斜体*/
font-weight: bold;/*加粗,可以设置为一个数值*/

css表格

可以给普通table表格添加css样式border-collapse: collapse;将表格边框变为单实线。

css列表

                <style type="text/css">
			body ul{
				list-style-type: none;
				/*列表项前面符号不显示*/
			}
			body ol{
				list-style-image: url(img/1.jpg);
				/*列表项前编号改图片*/
			}
		</style>
	</head>
	<body>
		<ul><!--无序列表-->
			<li>项目一</li>
			<li>项目二</li>
		</ul>
		<ol><!--有序列表-->
			<li>项目一</li>
			<li>项目二</li>
		</ol>
	</body>

display属性

display: block;/*此元素将按块级元素处理前后会换行*/
display: none;/*此元素会被隐藏*/
display: inline;/*此元素按内联元素处理前后不换行*/

浮动

float: left;	/*左浮动*/
float: right;	/*右浮动*/
clear: both;	/*该元素两侧不许有浮动元素*/

可以给多个垂直排列的div设置class添加浮动属性让它们排成一列

浮动的元素必须有固定的长宽不然浮动会出错。

当一个元素左浮动的时候他会一直向左移动直到碰到一个div的边界。

为保证浮动的效果要计算好每个div的长宽。

浮动可以添加给css列表。

鼠标cursor

cursor: default;
/*鼠标的默认指针*/
cursor: text;
/*文本选择的指针样式*/
cursor: move;
/*移动物品时候的十字键头*/
cursor: pointer;
/*点击时候的手指形状*/
cursor: url("图片地址");
/*设置为图片*/