![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
css
前端
异色小世界
这个作者很懒,什么都没留下…
展开
-
CSS知识总结
一、CSS导入到html的方式CSS导入到HTML的三种方式二、选择器基本选择器层次选择器结构伪类选择器属性选择器三、美化网页元素字体样式文本样式超链接伪类和文本阴影ul-li列表样式设置背景图片四、盒子模型CSS盒子模型CSS圆角边框...原创 2021-02-07 14:58:50 · 56 阅读 · 0 评论 -
CSS圆角边框
一、 border-radius 属性使用 CSS3 border-radius 属性,可以给元素制作 “圆角”。若 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。如下所示,则该元素的四个角都是圆角。div{ border-radius: 20px;}但是,如果你要在四个角上一一指定,可以使用以下规则:四个值: 左上,右上,右下,左下。(顺时针)三个值: 左上, 右上和左下,右下。(左上、对角、右下)两个值: 左上与右下,右上与左下。(对角原创 2021-02-07 14:58:15 · 110 阅读 · 0 评论 -
CSS盒子模型
盒子模型的组成部分:Margin(外边距) - 清除边框外的区域,外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域,内边距是透明的。Content(内容) - 盒子的内容,显示文本和图像。一、边框边框即border,设置方式如下所示:/*border: 粗细,样式,颜色*/#box{ width: 300px; border: 25px solid green;}二、内外边距外边距的妙用:居中原创 2021-02-07 14:57:19 · 74 阅读 · 1 评论 -
CSS背景图片
div{ width: 1000px; height: 700px; border: 1px solid red; /*背景图片,默认全部平铺*/ background-image: url("images/1.png");}.div1{ /*背景图片,水平平铺*/ background-repeat: repeat-x;}.div2{ /*背景图片,垂直平铺*/ background-repeat: repeat-y;}.原创 2021-02-06 14:40:48 · 97 阅读 · 0 评论 -
CSS列表样式设置
对于ul li 列表的一些设置:/* 行高:height list-style: 去掉圆点:none; 圆点变成空心圆:circle; 圆点变成正方形:square 圆点变成数字(有序):decimal;*/ul li{ height: 30px; list-style: none;}...原创 2021-02-06 14:39:45 · 173 阅读 · 0 评论 -
CSS超链接伪类和文本阴影
超链接伪类/*默认的颜色*/a{ text-decoration: none; color: black;}/*鼠标悬浮的状态(只需要记住这个)*/a:hover{ color: #ff496e; font-size: 50px;}/*鼠标按住但未释放的状态*/a:active{ color: #76e205;}文本阴影/*文本阴影 text-shadow: 水平偏移 垂直偏移 阴影半径 阴影颜色*/#price{ te..原创 2021-02-06 14:38:17 · 278 阅读 · 0 评论 -
CSS 文本样式
CSS文本样式的主要代码如下所示,可以复制到idea中查看效果。代码的主要含义已经在注释中进行了解释。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><!-- 颜色:color rgb rgba text-align: 文本对齐方式(居中之类的)原创 2021-02-06 14:37:16 · 170 阅读 · 0 评论 -
CSS字体样式
span标签:需要重点突出的字,用span套起来(约定俗成) <style> #title1{ font-size: 50px; } </style> <body> 欢迎学习<span id="title1">Java</span> </body>我们设置字体样式时,一般需要使用 font-代码。如下所示: <!--原创 2021-02-06 14:35:47 · 186 阅读 · 1 评论 -
CSS属性选择器
CSS属性选择器是CSS选择器中的重点。其主要通配符如下所示:= 绝对匹配*= 包含~= 包含^= 以该值为开头$= 以该值为结尾可以复制下面的代码,建立html文件,查看运行效果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style>原创 2021-02-06 14:34:39 · 137 阅读 · 0 评论 -
CSS结构伪类选择器
CSS结构伪类选择器 <style> /*ul的第一个子元素*/ ul li:first-child{ background-color: yellow; } /*ul的最后一个子元素*/ ul li:last-child{ background-color: red; } /*选中p1 :按顺序选择 定位到原创 2021-02-06 14:31:25 · 133 阅读 · 0 评论 -
CSS层次选择器
后代选择器选择层级内部的所有对应标签。层级 标签{}如下所示,body内部所有p标签背景色都变成红色: body p{ background-color: red; }子选择器:该层级下,只选择一代标签。层级>标签{}如下所示,body内部的第一代p标签背景色变成绿色。 /*子选择器*/ body>p{ background-color:..原创 2021-02-06 14:30:00 · 167 阅读 · 0 评论 -
CSS三种基本选择器
三种基本选择器的优先级: id > class > 标签标签选择器选择一类标签标签{} <style> h1{ color: green; } </style>类 选择器:选择所有class属性一致的标签,跨标签.class名称{}<!DOCTYPE html><html lang="en"><head>原创 2021-02-06 14:28:57 · 248 阅读 · 0 评论 -
CSS导入到HTML的三种方式
css三种导入方式:行内样式;内部样式;外部样式。如下所示:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!-- 内部样式 --> <style> h1{ color: green;原创 2021-02-06 14:27:12 · 736 阅读 · 0 评论