css 菜鸟

最新推荐文章于 2022-06-22 20:16:03 发布
最新推荐文章于 2022-06-22 20:16:03 发布
阅读量628 收藏 1
点赞数 1
分类专栏： 2021前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38998213/article/details/117930233
版权

div 设横向排列

设置浮动完成排列
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.main{width:100%;height:100px;}
.left{
    width:50%;height:100px;background: red;
    display: block;position: relative;float: left;
}
.right{
    float: right; background: green; height:100px;width:50%;display: block;
}
</style>
</head>
<body>
<div class="main">
    <div class="left">11</div>
    <div class="right">22</div>
</div>
</body>
</html>

在这里插入图片描述

block，inline和inline-block概念和区别

block和inline这两个概念是简略的说法，完整确切的说应该是
block-level elements (块级元素)
inline elements (内联元素)。
block元素通常被现实为独立的一块，会单独换一行；
inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。
大体来说HTML元素各有其自身的布局级别（block元素还是inline元素）：
常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如 P 元素，只能包含inline元素，而不能包含block元素。
一般来说，可以通过display:inline和display:block的设置，改变元素的布局级别。

什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

如何插入样式表

插入样式表的方法有三种:

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)
在这里插入图片描述
在这里插入图片描述
background-repeat:repeat-y;
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
去除连接的下划线
在这里插入图片描述
在这里插入图片描述
文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

实例
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
设置字体大小像素
设置文字的大小与像素，让您完全控制文字大小：

实例
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

用em来设置字体大小
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。

em的尺寸单位由W3C建议。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

实例
h1 {font-size:2.5em;} /* 40px/16=2.5em /
h2 {font-size:1.875em;} / 30px/16=1.875em /
p {font-size:0.875em;} / 14px/16=0.875em */
CSS 链接

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
实例
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 /
a:hover {color:#FF00FF;} / 鼠标移动到链接上 /
a:active {color:#0000FF;} / 鼠标点击时 */

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
a:link {background-color:#B2FF99;}    /* 未访问链接 */
a:visited {background-color:#FFFF85;} /* 已访问链接 */
a:hover {background-color:#FF704D;}   /* 鼠标移动到链接上 */
a:active {background-color:#FF704D;}  /* 鼠标点击时 */
</style>
</head>

<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p>
<p><b>注意:</b>active必须在hover之后定义是有效的.</p>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>

<body>
<p>无序列表实例:</p>

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>有序列表实例:</p>

<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
table,th
{
	border:1px solid black;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<th>Peter</th>
<th>Griffin</th>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>

在这里插入图片描述

CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
CSS box-model
不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<body>

<h2>盒子模型演示</h2>

<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>

<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>

</body>
</html>

在这里插入图片描述

css边框样式

border-style 值:
none: 默认无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

groove: 定义3D沟槽边框。效果取决于边框的颜色值

ridge: 定义3D脊边框。效果取决于边框的颜色值

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

outset: 定义一个3D突出边框。 效果取决于边框的颜色值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
p
{
	border-top-style:dotted;
	border-right-style:solid;
	border-bottom-style:dotted;
	border-left-style:solid;
}
</style>
</head>

<body>
<p>两个不同的边界样式。</p>
</body>
</html>

在这里插入图片描述

隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

实例
h1.hidden {visibility:hidden;}

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

实例
h1.hidden {display:none;}

html中target四种选择_blank、_parent、_self、_top

1，target="_self", 它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。(此处就是实现你的每次跳转都在同一个窗口的核心点)

2、target="_blank" ,浏览器总在一个新打开、未命名的窗口中载入目标文档

3、target="_parent" ，属性作用使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。

4、target="_top" ， 属性作用使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
li{display:inline;}
</style>
</head>
<body>

<p>链接列表水平显示：</p>

<ul>
<li><a href="/html/" target="_blank">HTML</a></li>
<li><a href="/css/" target="_blank">CSS</a></li>
<li><a href="/js/" target="_blank">JavaScript</a></li>
<li><a href="/xml/" target="_blank">XML</a></li>
</ul>

</body>
</html>

在这里插入图片描述

CSS Position(定位)

position 属性的五个值：
static
relative
fixed
absolute
sticky
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#overflowTest {
    background: #4CAF50;
    color: white;
    padding: 15px;
    width: 80%;
    height: 100px;
    overflow: scroll;
    border: 1px solid #ccc;
}
</style>
</head>
<body>

<div id="overflowTest">
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
</div>

</body>
</html>

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210616112500540.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEzsize_16,color_FFFFFF,t在这里插入图片描述

CSS Float（浮动）

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

所有CSS伪类/元素

选择器 示例 示例说明
:checked input:checked 选择所有选中的表单元素
:disabled input:disabled 选择所有禁用的表单元素
:empty p:empty 选择所有没有子元素的p元素
:enabled input:enabled 选择所有启用的表单元素
:first-of-type p:first-of-type 选择的每个 p 元素是其父元素的第一个 p 元素
:in-range input:in-range 选择元素指定范围内的值
:invalid input:invalid 选择所有无效的元素
:last-child p:last-child 选择所有p元素的最后一个子元素
:last-of-type p:last-of-type 选择每个p元素是其母元素的最后一个p元素
:not(selector) :not§ 选择所有p以外的元素
:nth-child(n) p:nth-child(2) 选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素
:nth-last-of-type(n) p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n) p:nth-of-type(2) 选择所有p元素第二个为p的子元素
:only-of-type p:only-of-type 选择所有仅有一个子元素为p的元素
:only-child p:only-child 选择所有仅有一个子元素的p元素
:optional input:optional 选择没有"required"的元素属性
:out-of-range input:out-of-range 选择指定范围以外的值的元素属性
:read-only input:read-only 选择只读属性的元素属性
:read-write input:read-write 选择没有只读属性的元素属性
:required input:required 选择有"required"属性指定的元素属性
:root root 选择文档的根元素
:target #news:target 选择当前活动#news元素(点击URL包含锚的名字)
:valid input:valid 选择所有有效值的属性
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个

元素的第一个字母
:first-line p:first-line 选择每个

元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的

元素
:before p:before 在每个

元素之前插入内容
:after p:after 在每个

元素之后插入内容
:lang(language) p:lang(it) 为

元素的lang属性选择一个开始值

ZhangJiQun&MXP
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
菜鸟教程，css小白入门
weixin_52163352的博客
11-15 978
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
easyui中data-options用法
热门推荐
好记性不如烂笔头--玲博小记
08-30 9万+
data-options是jquery easyui 最近几个版本才开发的一个属性。在控件中具有和Index相对应的Controller，调用其中的方法。因为有这个属性，我们在html中就可以实例化组件。 子节点属性赋值 <div class="easyui-dialog" style="width:200px;height:100px" data-options="title:'M
CSS-选择器用法简介（菜鸟版）
weixin_48767006的博客
06-22 1561
多看几眼，让你迅速掌握所有CSS基础选择器。
CSS菜鸟教程
qq_31065757的博客
09-23 6636
1. CSS Id 和 Class p.center {text-align:center;}所有的 p 元素使用 class="center" 让该元素的文本居中:   2. CSS 背景 background-color:#b0c4de;背景颜色 background-image:url('paper.gif');背景图像 background-repeat:repeat-x;背景...
菜鸟学前端——css基础篇
weixin_34326429的博客
08-18 159
一、CSS是神马？CSS是Cascading Style Sheet的缩写，译为层叠样式表，用来控制网页样式，并允许将样式信息与网页内容分离(如链接式)的一种标记性语言。它是UI表现层（Presentation）的核心元素。CSS以HTML技术为基础，对其进行扩展，使其更加丰富多彩，美轮美奂。试问只有HTML的标签，而没有CSS样式的修饰，那么这个网页是什么样子的呢？二、怎么...
CSS学习之菜鸟入门
追梦
12-27 4352
CSS主要是用来控制网页显示的样式。通过CSS可以让HTML里的内容展现出绚丽的效果，就好比给一个人化妆，用的恰当，效果就好。本文只是对CSS一些简单的内容作了一下整理，至于其他强大的功能还需要我们继续探索，在以后的学习中逐渐深入。
CSS菜鸟教程.pdf
11-19
。。。
菜鸟教程CSS的思维导图
04-21
依据菜鸟教程的CSS/HTML/JS教程，自制思维导图，内容和博客上的内容一样，xmind的可以使用超链接有助于，随时查阅菜鸟教程的资料，只是作者自制的思维导图，若有侵权，请告知，立即删除。
picnic:一个漂亮CSS库来启动您的项目
04-21
野餐CSS 打开您的饭菜包装并获取编码。 一个侵入性CSS库，以开始您的样式。 入门 在您的项目中有多种使用Picnic CSS的方法。 这里简要介绍推荐的两种方法： CDN-给我文件 使用链接到静态文件。 Bower-个性化野餐 要...
自适应rem的css文件
05-23
常用于手机pc自适应 只需要使用rem作为单位直接写就好
网页制作之CSS的菜鸟级 chm 参考教程.rar
07-04
一本网页制作教程，关于CSS的简明教程，一方面介绍CSS学习的方法，方法大似气力，有了好的方法学习CSS既快速又有效;另一方面介绍学习CSS的四个阶段： 　阶段一：不去想浏览器的兼容性问题的情况下能做出页面，但...
菜鸟教程-css学习笔记
微电子学与固体电子学-俞驰
12-10 744
CSS实例中有很多CSS的例子，可以学习。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> body { background-color:#d0e4fe; } h1 { ...
《CSS菜鸟教程》学习
Haipai1998的博客
05-30 915
学习资料：《CSS菜鸟教程》 学习目标：熟悉CSS语法即可
三小时学会css（菜鸟教程精华版）【中】
永恒之蓝的博客
07-24 759
三小时学会css 上期传送门 CSS 盒子模型(Box Model) CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 盒子模型(Box Model)： Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。 元素
CSS-基础篇
rfalcon的博客
05-18 2万+
CSS基础部分自学笔记 内联样式 也称行内或行间样式，是在html标签上添加style属性来实现的 内部样式 在<style></style>标签内添加的样式，内部样式的代码可以复用、符合W3C标准，尽量让结构和样式分开处理 外部样式 <link rel="stylesheet" href=""> rel：指定资源跟页面的关系 href：资源的地址 @import url(./common.css); 这种方式有很多问题，不建议使用 颜色表示法 单词表示法
CSS 入门
写代码是兴趣，看美美是爱好
05-17 269
目录一.CSS介绍1.CSS2.基本使用二.CSS选择器1.作用2.种类（1）ID选择器（2）class选择器（3）群组选择器（4）后代选择器（5）子代选择器（6）兄弟选择器（7）相邻选择器（8）属性选择器（9）伪类选择器3.权重三.CSS字体1.font-family 字体2.font-size 字体大小3.color文字颜色4.font-weight 文字加粗（bold 加粗）5.font-style 文字倾斜（italic）6.font-variant 大小写转换四.CSS文本1.line-heigh
移动web开发之像素和DPR详解
开心大表哥
02-09 4万+
前话： 　　像素在web开发中几乎天天用到，但到底什么是像素，移动端和桌面端的像素有区别吗，缩放对像素有影响吗，视网膜屏幕和像素有什么关系？关于这些问题，可能就不清楚了。本文将介绍关于像素的相关知识 　　 什么是像素： 　　像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”...
三小时学会css（菜鸟教程精华版）【上】
永恒之蓝的博客
07-24 455
三小时学会css 三小时学会HTML传送门 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>永恒之蓝</title> <style> body {background-color:yellow;} h1 {font-size:36pt;} h2 {color:blue;} p {margin-left:50px;} </style&g
EasyUI——常见用法总结
weixin_30235225的博客
12-06 1056
1. 使用 data-options 来初始化属性。 data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性。通过这个属性，我们可以对easyui组件的实例化可以完全写入到html中，例如： <div class="easyui-dialog" style="width:400px;height:200px" data-optio...
css 定点连线 svg
最新发布
09-12
在菜鸟教程的简单实例中，通过polyline元素的points属性指定了一系列点的坐标，然后通过CSS样式来定义连线的颜色、粗细等样式属性。 在菜鸟教程的示例中，使用的CSS样式设置了SVG图形的默认样式，其中stroke属性...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZhangJiQun&MXP

等到80岁回首依旧年轻

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值