css样式

css属性

• color: 颜色
• font-size: 字体大小(px)
• text-decoration: 修饰文本(none表示标准文本)
• line-height: 设置行高
• text-indent: 设置首行缩进
• text-align: 设置文本的水平对齐方式

css引入方式

行内样式

写在标签的style属性中(不推荐)

<h1 style="color: red;">焦点访谈：中国底气 新思想夯实大国粮仓h1>

内嵌样式

写在style标签中(可以写在页面任何位置，但通常约定写在head标签中)

<style>h1 {color: red;}
style>

外联样式

写在一个单独的css文件中(需要通过link标签在网页中引入)

<link rel="stylesheet" href="css/news.css">

css文件代码如下:

h1 {color: red;
}

颜色表示形式

关键字

预定义的颜色名, 如下:
red, green, blue...

rgb表示法

红绿蓝三原色, 每项取值范围: 0~255
rgb(0, 0, 0)

十六进制表示法

'#'开头, 将数字转换成十六进制表示
#000000, #ffffff, 可以简写: #000, #fff

css选择器

选择器优先级: id>类>元素

元素选择器(标签选择器)

/* 元素选择器 */
h1 {color: #4d4f53;
}

类选择器

/* 类选择器 */
.cls {color: #888888;
}

id选择器

唯一

/* id选择器 */
#time {color: #888888;
}

盒子模型

盒子模型组成: 内容区域 (content), 内边距区域 (padding), 边框区域 (border), 外边距区域(margin).

div {width: 200px;height: 200px;/* 设置width height为盒子的宽高 */box-sizing: border-box;/* 背景色 */background-color: aquamarine;/* 内边距: 上 右 下 左 */padding: 20px 20px 20px 20px;/* 边框: 宽度 线条类型 颜色 */border: 10px solid red;/* 外边距: 上 右 下 左 */margin: 30px;
}

页面居中

#center {width: 75%;/* 外边距 *//* 上, 右, 下, 左 *//* margin: 0% 12.5% 0 12.5%; *//* 上下, 左右 */margin: 0 auto;
}

表格, 表单标签

表格标签

<table border="1px" cellspacing="0" width="600px"><tr><th>序号th><th>品牌Logoth><th>品牌名称th><th>企业名称th>tr><tr><td>1td><td><img src="img/huawei.jpg" width="100px">td><td>华为td><td>华为技术有限公司td>tr>
table>

表单标签

 
<form action="" method="get">用户名: <input type="text" name="username">年龄: <input type="text" name="age"><input type="submit" value="提交">
form>

表单项标签

<form action="" method="post">姓名: <input type="text" name="name"> <br><br>密码: <input type="password" name="password"> <br><br>性别: <label><input type="radio" name="gender" value="1"> 男 label><label><input type="radio" name="gender" value="2"> 女 label> <br><br>爱好: <label><input type="checkbox" name="hobby" value="java"> java label><label><input type="checkbox" name="hobby" value="game"> game label><label><input type="checkbox" name="hobby" value="sing"> sing label> <br><br>图像: <input type="file" name="image"> <br><br>生日: <input type="date" name="birthday"> <br><br>时间: <input type="time" name="time"> <br><br>日期时间: <input type="datetime-local" name="datetime"> <br><br>邮箱: <input type="email" name="email"> <br><br>年龄: <input type="number" name="age"> <br><br>学历:   <select name="degree"><option value="">--- 请选择 ---option><option value="1">大专option><option value="2">本科option><option value="3">硕士option><option value="4">博士option>select> <br><br>描述: <textarea name="description" cols="30" rows="10">textarea> <br><br><input type="hidden" name="id" value="1"><input type="button" value="按钮"><input type="reset" value="重置"><input type="submit" value="提交"><br>
form>

参考

黑马程序员. JavaWeb开发教程

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！