笔记仅自用,发文章其实是为了保存和记录(逃)
可以直接打开看代码,也可以用浏览器查看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<meta http-equiv="Content-Type" content="text/html;charset-utf-8" />
<!-- 常用编码格式: utf-8 gbk gb2312 -->
<title>很好看的标题,css笔记</title>
<!-- 内部引入方式 -->
<style type="text/css">
/* !important的作用:
把它加在需要提高优先级的属性后面之后,这个属性的优先级就是最高的 */
/* 选择器{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
} */
/* 1.标签选择器 */
div{
font-size: 30px;
font-family: "楷体";
color: rgb(43, 226, 202);
}
input{
background-color: yellow;
}
/* 类选择器.class */
.one{
color: pink;
font-family: 隶书;
}
.two{
color: green;
}
div.two{/* 意思:控制class=two的div标签 */
color: rgb(221, 218, 15);
}
/* 3.id选择器#id */
#header{
font-size: 20px;
font-family: 幼圆;
}
#nav{
font-size: 20px;
}
/* 4.后代选择器(选择器的特殊用法) */
div p{color: red;}/* 意思:控制div下面的p */
div p span{color: rebeccapurple;}/* 意思:控制div下面的p标签下的span */
/* 5.群组选择器 */
/* 同时控制多个类型(用逗号隔开,标签、类、id都能写)的样式*/
h1,h2,h3{ color: royalblue;}
/* 6.全局选择器*(优先级最低) */
*{color: rgb(44, 113, 204);}
/* 7.属性选择器[type=""] */
input[type="text"]{
background-color: aqua;
}
/* 8.伪类选择器 */
/* 超链接a:必须以link,hover,active,visited顺序书写
link正常
hover鼠标移上去
active鼠标按下,不抬起
visited被点击过,被打开过
*/
.cursors{
float: right;
}
.cursors a:link{
cursor: pointer;
color: aquamarine;
}
.cursors a:hover{
cursor: pointer;
color: aqua;
font-size: large;
}
.cursors a:active{
cursor: pointer;
color: red;
font-size: small;
}
.cursors a:visited{
cursor: pointer;
color: blue;
}
/* child */
div:first-child{/* 当改标签是它父标签的第一个 孩子 时才生效 */
color: cadetblue;
}
span:first-child{/* 当改标签是它父标签的第一个 孩子 时才生效 */
color: rgba(243, 164, 161, 0.747);
}
a:link{
color: goldenrod;
}
a:hover{
color: red;
font-size: 30px;
}
a:active{
color: rgb(66, 32, 218);
font-size: 20px;
}
a:visited{
color: rgb(32, 218, 38);
}
.one:visited{/*表示控制one类的visited状态*/
color: rgb(8, 3, 101);
}
img:hover{/*表示控制img类的hover状态*/
width: 300px;
}
/* 背景 */
body{
/* transparent默认 */
background-color: transparent;
}
.three{
width: 800px;
height: 2000px;
/* 可以用一行做到跟下面一大串一样的效果,标签不分先后 */
background: aquamarine url(img/api.jpg) no-repeat 30px 10px fixed;
/*背景颜色*/
/* background-color: aquamarine; */
/*背景图片*/
/* background-image: url(img/api.jpg); */
/* 背景以重复方式布满:默认垂直水平方向重复布满
no-repeat不重复 repeat-x控制x方向上重复 repeat-y控制y方向上重复 */
/* background-repeat: no-repeat;
/* 主图对齐方向 x y top,left,right,...*/
/* background-position: 30px 10px;
/* scroll随页面滚动而移动(默认)
fixed保持在页面的固定位置,不随页面滚动而移动(小广告常用那种) */
/* background-attachment: fixed;*/
}
.four{
width: 800px;
height: 2000px;
background-color: green;/*背景颜色*/
}
/* 字体 */
div{
/* 可以用一行做到跟下面一大串一样的效果,
标签一定要按style varlant weight size/line-height family 的顺序设置 */
font:oblique bold 20px "幼圆","微软雅黑","宋体";
/* 字体大小 small,larger,medium,几个em(几个默认浏览器字体设置大小),px,...*/
/* font-size: 30px; */
/* 字体系列 如果计算机不支持第一个,就会显示第二个样式,以此类推*/
/* font-family: "幼圆","微软雅黑","宋体"; */
/* 字体颜色 */
/* color: rgb(79, 115, 133); */
/* 字体风格 italic斜体 oblique倾斜显示*/
/* font-style: italic; */
/* 字体粗细 100~900由细到粗 bolder=900,...*/
/* font-weight: 900; */
/*首行缩进:2个字符(偏移量:字体设置大小*2)*/
text-indent: 2em;
/* 字体对齐方式 left right center justify自适应(两端对齐) */
text-align: justify;
/* (单词之间的/空格两端的文本的)字间距 */
word-spacing: 50px;
/* 控制单个字符与单个字符之间的字间距 */
letter-spacing: 20px;
/* 文本装饰
line-through中划线 overline上划线 underline下划线 */
text-decoration: underline;
/* 行高 */
line-height: 50px;
}
/*
list-style-type 列表前面的点的样式(有序无序列表有区别)
list-style-image 把列表前面的点换成图片(一样)url()
list-style-position 列表前面的点的位置(一样)inside靠里(默认) outside靠外
list-style 统一设置type,image,position三个属性
*/
ul{
/*
列表前面的点的样式
disc实心圆(默认)
circle空心圆
square方
decimal数字(变为有序)
none无
*/
/* list-style-type: circle;
list-style-image: url(img/fish.png);
list-style-position: inside; */
/* list-style 统一设置 */
list-style: circle url(img/fish.png) inside;
}
ol{
/*
decimal数字(默认)
upper-roman大写罗马数字
lower-roman小写罗马数字
upper-alpha大写英文字母
lower-alpha大写英文字母
*/
/* list-style-type: upper-alpha;
list-style-image: url(img/tail.png);
list-style-position: outside; */
/* list-style 统一设置 */
list-style: upper-alpha url(img/tail.png) outside;
}
/* display修改成行/块元素 block块元素 inline行元素 */
.five{
/* 修改为行元素 */
display: inline;
}
.six{
/* 修改为块元素 */
display: block;
}
/* 盒子模型(必须是块元素)
border外边框
border-style边框样式 只能统一设置
border-top/right/button/left-style 可以单独设置
none无(默认) solid一条线 dashed虚线 dotted圆点 double两条线 outset灰3d线
border-width边框宽度 只能统一设置
border-top/right/button/left-width 可以单独设置
border-color边框颜色 只能统一设置
border-top/right/button/left-color 可以单独设置
border-radius边框设置为圆角 数值越大转弯幅度越大,越圆
margin外边距
当两个盒子的外边距重合(包括嵌套)时,会采用外边距更大的那个,作为2个元素的外边距
padding内边距
padding-top/right/button/left
element元素
width宽
height高
auto居中(相对于父元素)
左右对应、上下对应,如果哪边空了就会赋上对应边的值
*/
.seven{
background-color: aquamarine;
/* width: 300px; *//*宽*/
width: 50%;/*宽*/
height: 300px;/*高*/
/* border: solid black 10px;/*边框*/
border-style: dashed;
border-color: blue;
border-width: 10px;
border-top-color: red;
border-top-style: double;
border-radius: 20px;
padding: 10px 20px 30px 40px;/*内边距 上右下左*/
margin: 10px auto ;/* 上右下左*/
}
/* body实际上是由内边距和外边距和边框的,它也是个盒子模型 */
body{
margin: 0;
padding: 0;
}
/* p标签、h1~6也是盒子模型 */
p,h1,h2,h3,h4,h5,h6{
margin: 0;
}
/* 浮动float left,right
浮动清除clear left,right,both(左右浮动都清除)
添加后元素不会被指定方向的浮动元素影响,
并且这个元素之后的元素都不会受到相同的影响 */
.float1{
background-color: red;
height: 300px;
width: 200px;
float: left;
}
.float2{
background-color: yellow;
height: 180px;
width: 250px;
float: left;
}
.float3{
background-color: blue;
height: 200px;
width: 200px;
float: right;
}
.long-strip{
background-color: aquamarine;
height: 50px;
width: 100%;
clear: right;
}
.clear{
height: 0;
clear: both;/*清除左右浮动,且后续元素都不会被左右浮动影响*/
}
/* 定位position
静态定位static(默认):普通文档流的方式(从上到下布局)
相对定位relative top,right,bottom,left
(相对于自身原来的位置,原来的框还在文档流里面占有空间
并不会让元素脱离文档流,所以也不会让元素“浮”起来,)
绝对定位absolute top,right,bottom,left
(相对于距离 最近的 已定位的 祖先元素,元素会脱离文档流)
固定定位fixed top,right,bottom,left
(相对于整个网页来定位,会脱离文档流,小广告常用) */
.position1{
position: static;/*静态定位*/
background-color: red;
height: 200px;
width: 200px;
}
.position2{
position: relative;/*相对定位*/
top: 10px;/*相对于自身原来的位置,与 上面 边缘 隔开多少距离*/
left: 20px;/*相对于自身原来的位置,与 左边 边缘 相隔多少距离*/
background-color: yellow;
height: 200px;
width: 200px;
}
.position3{
position: absolute;
top: 10px;
left: 10px;
background-color: blue;
height: 100px;
width: 100px;
}
.position4{
position: fixed;
top: 10px;
right: 10px;
background-color: green;
height: 200px;
width: 200px;
}
</style>
<!-- 外部引入方式 -->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>我是body的第一个孩子</div>
什么是html元素:下面的就是,从内容到标签都是html元素
行内标签不换行,块标签单行显示
一般情况下,块标签里面可以包含行内标签,行内标签不会相互包含
内部引入方式:把样式写到head区的style标签内
行内引入方式:把样式写到要添加样式的标签内
外部引入方式:把样式别的文件内,再在head区用link标签导入本页面后使用样式
rel引入样式 type引入内容 href引入路径
优先级:
行内 > 外部内部谁靠后谁优先
id选择器 > 类选择器class > 标签选择器 > 全局选择器*
在调整大小时,百分比 % 都是相对于父元素来说都
p标签有上下边距加宽处理
div块标签、span行内标签 没有处理
h标题标签可嵌套
b标签加粗
i标签斜体
<div class="one">div块元素class=one</div>
<div class="two">div块元素class=two</div>
<div class="one two">div块元素class=one、two</div><!--表示class同时=one、two-->
<div id="header">div块元素id=header</div>
<div id="nav">div块元素id=nav</div>
<div >div块元素<p>div下面的p<span>div下面的p标签下的span</span></p></div>
<h1>h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<p>p段落</p>
<p style="color: blue; font-size: 10px;">p段落</p>
<input type="text">
<input type="password">
<hr/>
<span>span是行内标签</span><b>b标签</b><i>i标签</i>
<img src="img/qingqve.png" style="width: 10%;">
<textarea></textarea>
<div>html元素,从内容到标签都是html元素<h1>很好看的标题</h1></div>
<a href="https://www.baidu.com/" target="_blank">进入百度</a>
<a href="https://www.baidu.com/" class="one" target="_blank">进入百度</a>
<a href="https://xz.eoghrt.cn/soft6/bdbh.html" target="_blank" title="进入崩铁">
<img src="img/640.jpg" >
</a>
<div>
<span>div的第一个孩子<span>div的第一个孙子</span></span>
<span>div的第二个孩子</span>
</div>
<div class="three">
safsafsdadfsasdf
</div>
<div class="four">
safsafsdadfsasdf
</div>
<div>但是《原神》是由 米哈游 自主研发的一款全新开放世界冒险游戏。
(Genshin Impact is a new open world adventure game independently developed by Mihoyo.)
游戏发生在一个被称作「提瓦特」的幻想世界,在这里,
被神选中的人将被授予「神之眼」,导引元素之力。你将扮演一位名为
「旅行者」的神秘角色,在自由的旅行中邂逅性格各异、能力独特的同伴们,
和他们一起击败强敌,找回失散的亲人——同时,逐步发掘「原神」的真相。
</div>
<ul>
<li>你说的对</li>
<li>但是</li>
<li>《原神》是由米哈游</li>
<li>自主研发的开放世界游戏</li>
</ul>
<ol>
<li>你说的对</li>
<li>但是</li>
<li>《原神》是由米哈游</li>
<li>自主研发的开放世界游戏</li>
</ol>
<div class="five">div修改前是块元素</div>
<span>放个普通的span标签~</span>
<span class="six">span修改前是行元素</span>
<span>放个普通的span标签~</span>
<div class="seven" style="text-size-adjust: 10px; color: black; text-align: justify; text-indent: none; word-spacing: normal; letter-spacing: normal; ">
fadssfdasdfasdfsdfadssfdasdfasdfsdfadssfdasdfasdfsdfadssfd
</div>
afdasaffa
文档流
普通文档流(默认):从上到下
浮动float left,right
浮动清除clear left,right
添加后元素不会被指定方向的浮动元素影响,
并且这个元素之后的元素都不会受到相同的影响
<div>asasafs</div>
<div>asasafs</div>
<p>asasafs</p>
<div>asasafs</div>
<div>asasafs</div>
<span>sasfdsdaffs</span>
<span>sasfdsdaffs</span>
<span>sasfdsdaffs</span>
<span>sasfdsdaffs</span>
<div class="float1"></div>
<div class="float2"></div>
<div class="float3"></div>
<div class="long-strip"></div>
<div style="color: gold;">清除左右浮动前</div>
<div class="clear"></div>
<div style="color: gold;">清除左右浮动后</div>
定位position
静态定位static(默认)
普通文档流的方式(从上到下布局)
相对定位relative top,right,bottom,left
(相对于自身原来的位置,原来的框还在文档流里面占有空间
并不会让元素脱离文档流,所以也不会让元素“浮”起来,)
绝对定位absolute top,right,bottom,left
(相对于距离 最近的 已定位的 祖先元素,元素会脱离文档流,会随网页滚动而滚动)
固定定位fixed top,right,bottom,left
(相对于整个网页来定位,会脱离文档流,不会随网页滚动而滚动,小广告常用)
<div class="position1"></div>
<div class="position2">
position部分的第四个框飞到上面去了找找看~
<!--相对于(已定位的)父元素定位-->
<div class="position3" style="color:gold">绝对定位position部分的第三个框</div>
</div>
<!--相对于body定位-->
<div class="position3" style="color:gold">绝对定位 position部分的第四个框</div>
<!--相对于整个网页定位-->
<div class="position4" style="color:gold">固定定位 position部分的第五个框</div>
<div class="cursors">
伪类 <a href="https://www.baidu.com?3525/">进入百度</a>
</div>
</body>
</html>