HTML-CSS的相关笔记

最新推荐文章于 2024-07-20 15:40:46 发布

立花泷的学习日记

最新推荐文章于 2024-07-20 15:40:46 发布

阅读量55

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/qq_37974765/article/details/120681994

版权

课程总结
overflow属性指定如果内容溢出一个元素的框，会发生什么
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

hover在鼠标移到链接上时添加的特殊样式。
提示: :hover 选择器器可用于所有元素，不仅是链接。
提示: :link 选择器设置了未访问过的页面链接样式, :visited 选择器设置访问过的页面链接的样式 :active选择器设置当你点击链接时的样式。
注意: 为了产生预期的效果，在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后

激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接：
a:link {color:green;}
a:visited {color:green;}
a:hover {color:red;}
a:active {color:yellow;}

HTML基本常用标签
div标签：块状元素
img标签：src地址属性
a标签：href 跳转地址
ul标签：无序
ol标签：有序
p标签：段落
input标签：type""
用户名：text

单选框:radio

复选框：checkbox
颜色：color
button标签：按钮 value值

css的基本知识
css引入的三种方式
内嵌、外链（link）、行内式
选择器：标签选择器div{}、id选择器#id(权重最高，唯一性)、类选择器.class
后代选择器：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>后代选择器</title>
	<style type="text/css">
		.mydiv .mydiv p{
			background: green;
		}
	</style>
</head>
<body>
	<p>我希望天天天气都很好</p>
	<div class="mydiv">
		<p>今日天气不错</p>
		<div class="mydiv">
			<p>昨天天气不错</p>
		</div>
		<p>明天天气也不错</p>
	</div>
</body>
</html>
群组选择器：
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>群组选择器</title>
	<style type="text/css">
	.a1,.a2{
		background: red;
	}
		
	</style>
</head>
<body>
	<p class="a1">今天天气不错</p>

	<p class="a2">今天天气不错</p>

	<p class="a3">今天天气不错</p>

	<p class="a3">今天天气不错</p>
	<div class="a1">
		今日天气不错
	</div>
</body>
</html>

外边距：margin
内边距：padding 有填充的作用
边框：border 是往外长得边框 solid 实线 dashed 虚线
背景：background
height: 400px;width: 400px;
background-color:green ;/背景颜色/
background-image:url(2.JPEG) ;/背景图片/
background-size: 200px 200px;/背景图片的大小/
background-repeat: repeat-x;/背景图片平铺设置/
background-position:20px 40px ;/背景图片位置 (上下、左右)，第二个参数默认是center/

font-size:文字大小
任意游览器默认字体高度是16px
font-weight:字体的粗细
font-family:字体
line-height:字体位置
font-variant:small-caps 小写变成大写

css的相对定位
position:relative
绝对定位
position:absolute left和right不能同时使用
窗口定位
position:fixed 相对于窗口而言，多用于广告，跟着窗口移动
继承定位
position:inherit

相对定位：相对自己就行；position: relative
left 左边
right 右边
left和right只能选一个
z-index Z轴
相对定位不会影响原来的位置；
显示的元素会变位置；
绝对定位：position: absolute;
1.脱离标准流；
2.原来的位置不会保留；
3.绝对定位是根据有定位的父元素进行定位；
4.如果父元素没有定位，那么就会找到最外层的元素直到html标签；
窗口定位：position: relative
根据窗口进行定位,应用于广告栏
有滚动条的话，一直跟着窗口走
继承定位：position: inherit
继承父级的定位，父级是什么定位，自己就是什么定位
定位的默认值：static 没有定位

display:none;
让原来的元素进行消失（行内和块状都有效）；
display:block可以让行内元素变成块状元素的样式
float:也能把元素变成块状元素
display:inline 将任何元素变成行内元素
行内元素的特点：横着码
块状元素的特点：支持宽高，独占一行
display: inline-block行内块：横着码，支持宽高,

单位 px 绝对单位
百分比 % 相对单位
无法判断是多少像素
百分比如果计算的呢？看父级元素的height 50%
就是父级高度的一半
html和body的标签的高度默认是0
比如全屏用px做不出来，用%很轻易的就能做出来

风筝效果：
写css控制html
left % 对应的是父级的width
top % 对应的是父级的height

box-shadow:0px 0px 0px #ccc 向右、下偏移、边框大小
向 div 元素添加阴影
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影

text-shadow 基本文字阴影（text-shadow）

立花泷的学习日记

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML-CSS的相关笔记

课程总结overflow属性指定如果内容溢出一个元素的框，会发生什么visible 默认值。内容不会被修剪，会呈现在元素框之外。hidden 内容会被修剪，并且其余内容是不可见的。scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit 规定应该从父元素继承 overflow 属性的值。hover在鼠标移到链接上时添加的特殊样式。提示: :hover 选择器器可用于所有元素，不仅是链接。提示: :
复制链接

扫一扫