javaWeb_day27:css续

最新推荐文章于 2022-03-08 17:30:23 发布

陈小帅1019

最新推荐文章于 2022-03-08 17:30:23 发布

阅读量153

点赞数

本文链接：https://blog.csdn.net/qq_40174864/article/details/82348713

版权

HTML 超文本标记语言网页
html5

后缀 *.html *.htm
内容：

10行

<html>
	<head>
		<meta charset="utf-8">
		<title>网页标题</titie>
	</head>
	<body>
		要显示的内容
	</body>
</html>

h1 ~ h6, p, hr分隔符, br 换行标签
a 跳转其它网页，页内锚记之间

2行

<a href="路径/文件名">提示文字</a>

4行

<a href="路径/文件名">
	<img src="路径/图片文件名" width="宽" height="高" alt="图片不可用时的提示信息">
</a>

3行

<a href="#id值">提示文字</a>
<标签 id="id值">

ul 无序列表
li
li
ol 有序
li
li

14行

<table border="边框宽度" width="表格宽度">
	<thead>
		<tr>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td colspan="合并列" rowspan="合并行"></td>
		</tr>
	</tbody>
	<tfoot>
</table>

表单标签

15行

<input type="text">  文本框
<input type="password">  密码框
<input type="radio" name="" checked>  单选, name取值相同的为一组
<input type="checkbox" name="" checked>  复选, name取值相同的为一组
<input type="button" value="文字">  <button type="button">文字</button>	普通按钮
<input type="reset" value="文字">  <button type="reset">文字</button>	重置按钮
<input type="submit" value="文字">  <button type="submit">文字</button>	提交按钮
<select>  下拉列表
	<option>值1</option>
	<option selected>值2</option>
	...
	<option>值n</option>
</select>
<textarea> 文本域

所有标签都有 name="" 带有name的表单在提交时才会把表单值发送给服务器
都有 value=""
都有 readonly 只读可以提交给服务器
都有 disabled 禁用不会提交给服务器

4行

<form action="服务器地址">

</form>

css 层叠式样式表级联式样式表 cascade
格式： style="样式"
前颜色 color:值（单词, rgb(红,绿,蓝) 0~255, #红绿蓝 0~FF）
背景色 background-color: 值
背景图片 background-image: url(图片路径)
控制背景图重复 background-repeat: 值(no-repeat, repeat-x, repeat-y)
文字 font-family: 字体值 (宋体，黑体...)
文字大小 font-size: 值 (px 像素, em 以原始大小比例)
文字样式 font-style: italic; 斜体
文字粗细 font-weight: bold; 粗体
对齐方式 text-align: 值(center, left, right)
文字修饰 text-decoration: 值(line-through 贯穿线， underline 下划线)
边框 border 边框颜色线条样式线条宽度;
border-color: 边框颜色
border-style: 线条样式( solid 实心线)
border-width: 线条宽度
border-top 上边框
border-right 右边框
border-bottom 下边框
border-left 左边框

1. 内间距

标签和内容之间的间隙，称为内间距
padding 可以同时控制4个方向上的内间距
padding : 10px 10px 10px 10px;
上右下左

padding : 20px 5px;
上下左右

padding : 10px
上下左右

padding-top
padding-right
padding-bottom
padding-left

2. 外间距

同级标签之间的间隙，称为外间距
margin: 10px 10px 10px 10px;
上右下左
margin :10px
上下左右
margin-top
margin-right
margin-bottom
margin-left

3. 盒子模型

外间距 --》边框 --》内间距 --》内容

4. z-index

代表该元素在z轴的位置，数字越大越向外, 要配合绝对定位使用
position:absolute; left:x坐标（向右）; top:y坐标(向下)
绝对定位

rgba(红, 绿, 蓝, 透明度)
0~1 0 表示完全透明， 1 表示不透明

5. 样式表

重用样式
格式：

8行

<html>
  <head>  
	<style>
     样式表
	</style>
  </head>
</html>

选择器 { 样式 }
首先使用选择器去匹配标签，匹配到的标签就会应用{}之中的样式

5.1 元素选择器

根据标签的名称进行匹配
例如div 是匹配页面中所有的div标签，p匹配页面中所有的p标签 ...

5.2 class 选择器

根据标签的 class 属性的值进行匹配

5行

<p class="值">	
<td class="">	
<input class="">	
.class值 { 样式 }

5.3 id选择器

根据标签的id属性值进行匹配

5行

<p id="值">
<td id="值">
<input id="值">   id的取值要唯一
#id值 {样式  }

5.4 父子选择器

父选择器>子选择器
最终选中的是子选择器匹配的标签，但必须满足条件：父标签要和父选择器匹配

5.5 后代选择器

祖先选择器后代选择器

5.6 伪类选择器

:hover 当鼠标悬浮在标签之上，算匹配
:nth-child 当作为第n个孩子元素, n从1开始
:last-child 当作为最后一个孩子元素

5.7 选择器的优先级

当多个选择器都匹配到同一个标签时，会产生优先级问题：

!important > style行内样式 > #id > .class > 元素

!important 用来提升某个样式的优先级, 写法：

2行

样式 !important

子标签可以从父标签继承某个样式，例如color
子标签自己定义了同名样式，那么它会覆盖父标签的样式
同优先级别的选择器，后定义的会覆盖前面定义的

6. 在网页之间重用样式

需要用到外部样式表，可以把选择器，样式的定义放在一个 *.css 的文件当中（样式表文件）
引入外部的样式表：

2行

<link rel="stylesheet" href="路径/css文件名">

好处：可以更大程度地在多个网页间重用样式，让网站的风格统一

内部样式表可以实现本网页特殊的样式，采用覆盖的方法，可以覆盖掉外部样式表的样式

陈小帅1019

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaWeb_day27:css续

HTML 超文本标记语言网页html5后缀 *.html *.htm内容： 10行&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;网页标题&lt;/titie&gt; &lt;/head&gt; &lt;body&gt; 要显示的内容 &
复制链接

扫一扫