CSS与HTML的各种用法

来源：互联网发布：组态软件学哪个编辑：程序博客网时间：2024/05/22 07:58

1.段落首行缩进：p{text-indent:2em;}

2.字体：
大小：font-size:12px;
粗细：font-weight：normal（默认值）/bold（粗体）/bolder(更粗）/lighter(更细）/100-900（整百，400=normal、700=bold）/inherit（继承父辈）
样式：font-family:"宋体";
风格：font-style:normal(默认值）/italic（斜体）/oblique（倾斜）/inherit（继承父辈）
font-variant:small-caps;（把段落设置为小型大写字母字体）
缩写: 至少要指定 font-size 和 font-family 属性。其余可不写，若要写，写在前面。
font-size 与 line-height 中间要加入“/”

3.设置行高（行间距）为字体的130%：p{font-size:12px;line-height:130%（也可使用Xem）}

4.居中：非块状：text-align:center/left（居左—默认值）/right（居右）/justify（两端对齐文本）/inherit（继承父辈）;也可内嵌class="txtCenter"
块状：margin:5px auto;(通过auto控制左右居中)/也可写成margin-left:auto; margin-right:auto;

5.插入图片:：<img src="图片地址" alt="图像不可见时看见的文本" title = "鼠标滑过图片时显示的文本">
修改图片大小：img{width:100px;height:100px;}

6.插入链接：<a href="目标网址" title="鼠标滑过显示的文本" target="_blank">链接显示的文本</a>（有target="_blank"则在新窗口打开链接，没有则直接跳转）

7.注释： /*注释语句*/

8.粗体：<strong>"爵士乐时代"</strong>

9.斜体：<em>尼克•卡拉威</em>

10.换行：<br/>

11.输入空格： （若直接输入空格，不管输入几个空格都只算一个）

12.分隔线：<hr/>

13.无序列表：<ul><li>我的第一个列表信息</li></ul>

14.有序列表：<ol><li>我的第一个列表信息</li></ol>

15.表格：<table summary="表格简介文本，可以没有">
<caption>标题文本</caption>
<tbody>
<tr>
<th>班级</th>
（th是首行标题内容）
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>一班</td>
（td表示表格内容，一行中包含几对<td>...</td>，说明一行中就有几列。）
<td>30</td>
<td>89</td>
</tr>
（表格的一行，所以有几对tr 表格就有几行。）
</tbody>
（当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。）

</table>

16.边框：border:1px solid #000;（边框宽度边框线属性[虚线：dashed；实线：solid；点线：dotted；双线：double] 边框线颜色）
一个边框定义多个样式：border-style: solid dotted dashed double;（满足上右下左）
单边框设置：border-top(right/bottom/left)-style
边框宽度设置：border-width:5px(thin/medium/thick) 3px 15px 15px;(满足上右下左）也可写成border-top(right/bottom/left)-width
边框颜色：border-color:black;(满足上右下左）也可写成border-top(right/bottom/left)-color

17.文本框：<textarea rows="10" cols="30">我是一个文本框。 </textarea>

18.输入框：<input type="text（文本输入）/password（密码输入）" name="名称" placeholder="提示默认文本" >（一般用在表单form中）

19.选择框：<input type="radio（单选框——name必须相同）/checkbox(复选框）" value="提交到服务器的数据" name="为控件命名" checked="checked">（一般用在表单form中、当设置 checked="checked" 时，该选项被默认选中）

20.下拉框：<form action="save.php" method="post" >
【action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)；method ：数据传送的方式（get/post）】
<label>爱好:</label>
<select>（在<select>标签中设置multiple="multiple"可以实现多选）
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
（设置selected="selected"属性，则该选项就被默认选中。）
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</form>

21.按钮:<input type="submit（提交）/reset(重置）" value="按钮上显示的文字" name="为控件命名" >
<button type="submit/reset/button" value="Submit">Like</button>

22.外部CSS样式使用：<link href="外部样式名字" rel="stylesheet" type="text/css" />（位置一般写在<head>标签之内。）

23.选择器：类选择器（.类选器名称）
ID选择器（#ID名称）
子选择器（.first>span——表示class="first"下的子元素span）
后代选择器（.first span——作用于所有子后代元素,子选择器只作用用儿子，后代作用包括儿孙等)
通用选择器（* {color:red;}——作用于所有标签）
伪类选择符：a:hover{color:red}（鼠标滑过时变红，不止可作用于a，还可作用于其他标签）
分组选择符：.first,#second span{color:green;}（多个标签元素设置同一个样式）

24.重要性：最重要的可以用important强调，使其不被覆盖。p{color:red!important;}

25.文本修饰：text-decoration：underline（下划线）/overline（文本上的一条线）/line-through（删除线）/blink（闪烁文本——IE、Chrome 或 Safari 不支持）/inherit（继承父辈）

26.字间距：文字间隔或者字母间隔：letter-spacing:2px;
单词之间的间距：word-spacing：5px;

27.设置为块状/内联元素：在style板块中：display:block（块状）/inline（内联）/inline-block（内联块状）;
内联：不能设置长宽高，在同一行
块状：可以设置长宽高，在不同行
内联块状：可以设置长宽高，在同一行

28.元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
边界（外间距）：margin边框：border填充（内间距）：padding
四边均可单独设置

29.浮动模型：一般块状元素单独成行，浮动模型使其不单独成行。
float:left（从左开始放置）/right(右）/inherit（继承父辈）

阅读全文

1 0