前端---CSS介绍一

css能够使网页元素的样式更加丰富，让网页的内容和样式拆分开，CSS是Cascading Style Sheets的首字母的缩写，意思是层叠样式表，html只负责文档的结构和内容，内容的表现形式交给CSS，html文档变得更加简洁。

css基本语法：

选择器：{属性：值；属性：值}

如：

div{

width:100px;

height:100px;

background:gold;

}

css引入方式：

1：内联式：通过标签<style>属性，在标签上直接写样式：

2：嵌入式：通过style标签，在网页上创建嵌入式的样式表

<style>

div{

　　　　width:100px;

　　　　height:100px'

　　　　}

</style>

3:外链式:通过link标签，链接外部样式文件写到页面中

CSS选择器：

1：标签选择器，一般用于通用的设置

div{ color:red}

....................

<div>这是第一个div</div>

<div>这是第二个div</div>

2:类选择器：通过类名来选择元素，一个类可应用于多个元素，一个元素可以使用多个类

.blue{color:blue}

.big{font-size:20px}

.box{width:100px;height:100px;background:gold}

.................

3:层级选择器：主要应用在标签嵌套的结构中，层级选择器，是结合上面的两种选择器来写的选择器，可以与标签选择器结合使用。

.con{width:300px;height:80px;background:red}

.con span{color:red}

.con .pink{color:pink}

.con .gold{color:gold}

........................

</div>

4:id选择器，使用"#名字"表示

常用的布局样式属性：

width:设置元素的宽度

height:设置元素的高度

background:设置元素的背景颜色或背景图片

border:设置元素的四周边框，（border:1px solid red;(solid:表示实心线，dotted:点线；double:双线；dashed:虚线)）

也可以拆分写成四个边的写法

border-top:设置顶边边框

border-left:设置左边边框

border-right:设置右边边框

border-bottom:设置底边边框

background-image:url(img地址)

background-repeat:repeat-y;

例如：

div{
           width: 1000px;
           height: 300px;
           /* background: red; 设置背景颜色 */
           background-image: url(../img/banner.jpg);
           background-repeat: repeat-x;
           /* repeat-y: 背景图片竖着放
           no-repeat:图片只会出现一次*/
           background-repeat: repeat-y;
       }

padding:设置元素包含的内容和元素边框的距离，即为内边距，同样可以拆分为：padding-top,padding-right,padding-bottom,padding-right;

float设置元素浮动，浮动可以让块元素排列在一起，浮动分为左浮动，有浮动，float:left; float:right;

小于号：< 大于号：> 缩进：$nbsp;

margin：外边距

/* 1个参数表示上下左右
   2个参数表示上下,左右
    3个参数表示上,左右,下
    4个参数表示上,右,下,左*/
margin: 10px 20px 40px 50px;（顺时针）

音频链接：<audio src="音乐地址...." controls="controls">XXXXX</audio>

文本常用的样式属性一：

color:设置文字的颜色

font-size:设置文字的大小

font-family:设置文字的字体。如：font-family:"微软雅黑";

font-weight:设置文字是否加粗，font-weight:bold;设置加粗。 font-weight:normal;不加粗

line-height:设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px

text-decoration:设置文字的下划线，text-decoration:none;将文字的下划线去掉

text-align:设置文字水平对齐方式，如：text-align:center;设置水平居中

text-indent:设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24

样式中的注释：

/* 设置头部的样式*/

//使用p标签，系统会自动增加16px，如果想要对齐，需要将margin重新设置为0

　　p{
margin: 0;
}

........................

span标签与div标签的区别：

span标签表示一个透明的盒子，作用和div差不多，但使用span不会自动换行，div可以自动换行

form:设置表单，action表示动作，需要设置提交到哪里的url地址，method：请求方法，get和post，name作用是把当前端的数据再提交到后台服务器的时候，需要把name的属性一起提交

常用的表单元素：

<label>:标签为表单元素定义文字标注

<input>标签定义通用的表单元素

type属性：

“text”:定义单行文本输入框

"password":定义密码输入框

"radio"：定义单选框

"checkbox":定义复选框

"file":定义上传文件

"submit“:定义提交按钮

"reset":定义重置按钮

"button"定义一个普通按钮

<value>属性定义表单元素的值

<name>属性，定义表单元素的名称，此名称是提交数据时的键名

<textarea>定义多行文本输入框

<select>定义下拉表单元素。<option>与<select>标签配合使用

例子：

<body>
       用户名:<input type="text" /><br />
       密码:<input type="password" /><br />
       <label>性别:</label>
       
       <input type="radio" name="sex"/ checked="checked">男
       <input type="radio" name="sex" />女
       <label>兴趣爱好:</label>
       <input type="checkbox" />篮球
       <input type="checkbox" />足球
       <input type="checkbox" />乒乓球<br />
       <label>请上传你的玉照:</label><input type="file" /><br />
       <label>自我介绍:</label><textarea></textarea><br />
       <label>请选择城市:</label>
       <select>
           <option>北京</option>
           <option>上海</option>
           <option>深圳</option>
           <option>广州</option>
       </select><br />
       <input type="submit" value="提交" />
       <input type="button" value="普通按钮" />
       <input type="reset" value="重置"/>

   </body>

返回顶部实例：

猜你喜欢