css
关注
分享
扫一扫
前端
异色小世界
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
CSS知识总结
一、CSS导入到html的方式CSS导入到HTML的三种方式二、选择器基本选择器层次选择器结构伪类选择器属性选择器三、美化网页元素字体样式文本样式超链接伪类和文本阴影ul-li列表样式设置背景图片四、盒子模型CSS盒子模型CSS圆角边框...原创 2021-02-07 14:58:50 · 100 阅读 · 0 评论
-
CSS圆角边框
一、 border-radius 属性使用 CSS3 border-radius 属性，可以给元素制作 “圆角”。若 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。如下所示，则该元素的四个角都是圆角。div{ border-radius: 20px;}但是，如果你要在四个角上一一指定，可以使用以下规则：四个值: 左上，右上，右下，左下。（顺时针）三个值: 左上, 右上和左下，右下。（左上、对角、右下）两个值: 左上与右下，右上与左下。（对角原创 2021-02-07 14:58:15 · 178 阅读 · 0 评论 -
CSS盒子模型
盒子模型的组成部分：Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。一、边框边框即border，设置方式如下所示：/*border: 粗细，样式，颜色*/#box{ width: 300px; border: 25px solid green;}二、内外边距外边距的妙用：居中原创 2021-02-07 14:57:19 · 126 阅读 · 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 · 136 阅读 · 0 评论 -
CSS列表样式设置
对于ul li 列表的一些设置：/* 行高：height list-style: 去掉圆点：none; 圆点变成空心圆：circle; 圆点变成正方形：square 圆点变成数字（有序）：decimal;*/ul li{ height: 30px; list-style: none;}...原创 2021-02-06 14:39:45 · 239 阅读 · 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 · 341 阅读 · 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 · 226 阅读 · 0 评论 -
CSS字体样式
span标签：需要重点突出的字，用span套起来（约定俗成） <style> #title1{ font-size: 50px; } </style> <body> 欢迎学习<span id="title1">Java</span> </body>我们设置字体样式时，一般需要使用 font-代码。如下所示： <!--原创 2021-02-06 14:35:47 · 268 阅读 · 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 · 204 阅读 · 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 · 189 阅读 · 0 评论 -
CSS层次选择器
后代选择器选择层级内部的所有对应标签。层级 标签{}如下所示，body内部所有p标签背景色都变成红色： body p{ background-color: red; }子选择器：该层级下，只选择一代标签。层级>标签{}如下所示，body内部的第一代p标签背景色变成绿色。 /*子选择器*/ body>p{ background-color:..原创 2021-02-06 14:30:00 · 244 阅读 · 0 评论 -
CSS三种基本选择器
三种基本选择器的优先级： id > class > 标签标签选择器选择一类标签标签{} <style> h1{ color: green; } </style>类 选择器：选择所有class属性一致的标签，跨标签.class名称{}<!DOCTYPE html><html lang="en"><head>原创 2021-02-06 14:28:57 · 304 阅读 · 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 · 796 阅读 · 0 评论