HTML5学习笔记-Day4

最新推荐文章于 2024-10-10 22:10:24 发布

唐艽岚

最新推荐文章于 2024-10-10 22:10:24 发布

阅读量75

点赞数

分类专栏： HTML学习笔记文章标签： html5 css3 html css

本文链接：https://blog.csdn.net/qq_38066597/article/details/118538508

版权

HTML学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Day4 CSS选择器；背景

<head>
<style type="text/css">
ul li { color: red; /*后代选择器*/ }
.class>p { color: pink; /*子元素选择器*/ }
div, span { color: aqua; /*并集选择器*/ }

/*伪类选择器*/
a { color: #000; text-decoration: none; /*初始化，舍弃缺省*/ }
a:link { /*未访问*/ }
a:visited { /*访问过*/ }
a:hover { /*鼠标悬浮*/ }
a:active { /*鼠标按下未弹起*/ }
input:focus { /*被选中*/ }
</style>
</head>

CSS的元素显示模式

块元素:<div>、<h1>~<h6>、<p>、<table>、<form>、<ul>、<ol>
独占一行；高度、宽度、内外边距可控；宽度默认100%；
自己是容器/盒子，里面可以放块级/行内，但文字元素不要内嵌块级；

行内元素/内联元素:<a>、<em>、<span>等
直接设置高度宽度无效；默认宽高即内容宽高

行内块元素:<input/> <img/> <td>
一行允许存在多个，但是有空白间隙;
允许通过width/height设置宽度、高度;
默认宽高是自己内容的宽高;

display: block; /*显示模式转换成块级*/
display: inline; /*转换为行内*/
display: inline-block; /*转换为行内块*/

背景
background-color: 预置/Hex/RGB
background-image: url路径
background-repeat: repeat/no-repeat/repeat-x/repeat-y;
background-attachment: fixed/scroll 是否随滚动
background-position: length/position 是x,y坐标
background: rgba(255,255,255,0.75);alpha不透明度