CSS
MyLight1109
这个作者很懒,什么都没留下…
展开
-
[CSS]12.定位
一.相对定位相对定位:相对本元素原来的位置用法: position: relative; top: -20px; left: 20px;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style>原创 2021-07-27 13:03:48 · 44 阅读 · 0 评论 -
[CSS]11.盒子模型以及边框使用
盒子模型什么是盒子模型margin:外边距padding:内边距border:边框边框1.边框的粗细2.边框的样式3.边框的颜色 /*border:粗细,样式,颜色*/ #app{ width: 300px; border: 1px solid red; } h2{ font-size: 20px; backgro原创 2021-07-25 17:39:48 · 60 阅读 · 0 评论 -
[CSS]10.背景图像应用
举例子 div{ width: 1000px; height: 700px; border: 1px solid red; /*默认全部平铺*/ background-image: url("images/img.jpg"); } /*水平平铺*/ .div1{ background-repeat:原创 2021-07-25 17:20:21 · 76 阅读 · 0 评论 -
[CSS]9.列表样式练习
.title{ font-size: 18px; font-weight: bold; text-indent: 1em; line-height: 30px; background: red;}/*ul li*//*list-style: none; 去掉圆点 circle:空心圆 decimol:数字 squre:正方形*/#nav{ width:300px;}ul{ background: pink;}原创 2021-07-25 16:52:31 · 48 阅读 · 0 评论 -
[CSS]8.文本阴影和超链接伪类
阴影 /*text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径*/ #stat{ text-shadow: #b3e6f5 10px 10px 10px; }超链接伪类正常情况下,a,a:hover /*默认的状态*/ a{ text-decoration: none; color: black; } /原创 2021-07-25 16:38:04 · 55 阅读 · 0 评论 -
[CSS]7.文本样式
1.颜色单词RGBRGBA A:0-12.文本对齐方式text-align: center 排版3.首行缩进text-indent: 2em 缩进4.行高height: 300px; 块的高度line-height: 300px; 行高行高和块的高度一致,就可以上下居中5.装饰text-decoration: underline;text-decoration: line-through;text-decoration: overline;text-deco原创 2021-07-25 16:22:30 · 46 阅读 · 0 评论 -
[CSS]6.字体样式
font-family:字体font-size:字体大小font-weight:字体粗细 <style> body{ font-family: "Arial Black",新宋体; color: hotpink; } h1{ font-size: 50px; } .p1{ font-weight: bold;原创 2021-07-25 15:59:54 · 111 阅读 · 0 评论 -
[CSS]5.属性选择器(重要)
= 绝对等于 *= 包含 ^= 以...开头 $= 以...结尾 /*存在id属性的元素 a[]{}*/ a[id]{ background: pink; } /*id=first的元素*/ a[id=first]{ background: pink; } /*选中href中以http开头的元素*/ ...原创 2021-07-25 15:37:00 · 57 阅读 · 0 评论 -
[CSS]4.结构伪类选择器
伪类:所有带冒号的 /*ul的第一个子元素*/ ul li:first-child{ background: red; } /*ul的最后一个子元素*/ ul li:last-child{ background: blue; }原创 2021-07-25 15:08:56 · 41 阅读 · 0 评论 -
[CSS]3.层次选择器
层次选择器1.后代选择器:在某个元素的后面 后代选择器 ul后面的p标签 ul p{ background: red; }<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*后原创 2021-07-19 21:44:02 · 88 阅读 · 1 评论 -
[CSS]2.三种基本选择器
作用:选择页面上的某一个或者某一类元素1)标签选择器选择页面上所有这个标签的元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器会选择页面上所有这个标签的元素*/ h1{ color:原创 2021-07-19 19:08:37 · 77 阅读 · 0 评论 -
[CSS]1.三种CSS导入方式
优先级:就近原则1.行内样式<!--行内样式,在标签元素中,编写一个style属性,编写样式即可--><h1 style="color: red">我是标题</h1>2.内部样式<!-- 内部样式--> <style> h1{ color: green; } </style>3.外部样式<!--外部样式--> <li原创 2021-07-19 18:44:33 · 46 阅读 · 0 评论