02.CSS基础笔记及导入

 

 

CSS是什么

CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。

CSS样式

CSS引入HTML

内部样式与外部样式

<!DOCTYPE>
<html>
<head><meta charset="utf-8" /><title>内部样式表和外部样式表</title><!--内部部样式表--><style type="text/css">p{color: blue;}</style><!--外部样式表--><link rel="stylesheet" type="text/css" href="css/style.css" /> 
</head>
<body><p>我是p段落</p><div>我是div</div><ol><li>1111</li><li>2222</li></ol>
</html>

行内样式

<p style="color: red">Hello world.</p>

基本选择器

元素选择器

p {color: "red";}

ID选择器

#i1 {background-color: red;
}

类选择器

.c1 {font-size: 14px;
}
p.c1 {color: red;
}

注意:

样式类名不要用数字开头(有的浏览器不认)。

标签中的class属性如果有多个,要用空格分隔

通用选择器

* {color: white;
}

组合选择器

后代选择器

/*li内部的a标签设置字体颜色---指所有a*/
li a {color: green;
}

儿子选择器

/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {font-family: "Arial Black", arial-black, cursive;
}

毗邻选择器

/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {margin: 5px;
}

弟弟选择器

/*i1后面所有的兄弟p标签*/
#i1~p {border: 2px solid royalblue;
}

属性选择器

/*用于选取带有指定属性的元素。*/
p[title] {color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {color: green;
}/*找到所有title属性以hello开头的元素*/
[title^="hello"] {color: red;
}/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {color: yellow;
}/*找到所有title属性中包含(字符串包含)hello的元素*/
[title*="hello"] {color: red;
}/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素:*/
[title~="hello"] {color: green;
}

分组和嵌套

分组

当多个元素的样式相同的时候,我们没有必要重复地为每个元素都设置样式,我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。 

例如:

div, p {color: red;
}

 

上面的代码为div标签和p标签统一设置字体为红色。

通常,我们会分两行来写,更清晰:

div,
p {color: red;
}

嵌套

多种选择器可以混合起来使用,比如:.c1类内部所有p标签设置字体颜色为红色。

.c1 p {color: red;
}

 

字体属性

文字字体

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。

 

简单实例:

body {font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

字体大小

p {font-size: 14px;
}


文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定:

  • 十六进制值 - 如: FF0000
  • 一个RGB值 - 如: RGB(255,0,0)
  • 颜色的名称 - 如:  red

还有rgba(255,0,0,0.3),第四个值为alpha, 指定了色彩的透明度/不透明度,它的范围为0.0到1.0之间。

 

背景属性

 

/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*背景重复repeat(默认):背景图片平铺排满整个网页repeat-x:背景图片只在水平方向上平铺repeat-y:背景图片只在垂直方向上平铺no-repeat:背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/

支持简写:

background:#ffffff url('1.png') no-repeat right top;

使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上,然后根据位置去显示图片。减少频繁的图片请求。

 

display属性

用于控制HTML元素的显示效果。

意义
display:"none"HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。
display:"inline"按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"使元素同时具有行内元素和块级元素的特点。

 

display:"none"与visibility:hidden的区别:

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

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

选择器补充

伪类选择器

 

/* 未访问的链接 */
a:link {color: #FF0000
}/* 已访问的链接 */
a:visited {color: #00FF00
} /* 鼠标移动到链接上 */
a:hover {color: #FF00FF
} /* 选定的链接 */ 
a:active {color: #0000FF
}/*input输入框获取焦点时样式*/
input:focus {outline: none;background-color: #eee;
}

 

伪元素选择器

first-letter

常用的给首字母设置特殊样式:

p:first-letter {font-size: 48px;color: red;
}

before

/*在每个<p>元素之前插入内容*/
p:before {content:"*";color:red;
}

after

/*在每个<p>元素之后插入内容*/
p:after {content:"[?]";color:blue;
} 

before和after多用于清除浮动。

 

摘抄自:https://www.cnblogs.com/liwenzhou/p/7999532.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/280993.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何还原桌面图标_如何为Windows 10桌面图标还原或更改文本的默认外观?

如何还原桌面图标For whatever reason, sooner or later we all have someone or something mess around with our keyboards and create ‘interesting’ results. With that in mind, today’s SuperUser Q&A post has a simple and elegant way to help a frustrated re…

「前端早读君007」css进阶之彻底理解视觉格式化模型

今日励志 不论你在什么时候开始&#xff0c;重要的是开始之后不要停止。 前言 对于部分前端工程师来讲&#xff0c;有时候CSS令他们很头疼&#xff0c;明明设置了某个样式&#xff0c;但是布局就是不起作用。 如果你也有这种问题&#xff0c;那么是时候学习下什么是css视觉格式…

.NET周报【11月第3期 2022-11-22】

国内文章.NET Conf China 2022 第一批讲师阵容大揭秘&#xff01;整个期待了&#xff01;https://mp.weixin.qq.com/s/4p89hhBPw6qv-0OB_T_TOg目光看过来 2022 年 12 月 3-4 日&#xff0c;一场社区性质的国内规模最大的 线上线下.NET Conf 2022 技术大会 即将盛大开幕。目前大…

解读Facebook CAN:如何给人工智能赋予艺术创作的力量

雷锋网 AI 科技评论按&#xff1a;能够迭代进化、模仿指定数据特征的GAN&#xff08;生成式对抗性网络&#xff09;已经是公认的处理图像生成问题的好方法&#xff0c;自从提出以来相关的研究成果不少&#xff0c;在图像增强、超分辨率、风格转换任务中的效果可谓是惊人的。 &a…

全向轮底盘磁导轨寻迹

全向轮底盘上安装两条磁传感器带用于磁导轨寻迹 如简图所示&#xff0c;两条与Y直线相交的黑色线条我们认为是两条磁检测传感器带 矢量方法修正车体位置 定义轨道左为负向&#xff0c;轨道右为正向。传感器左检测为负&#xff0c;右检测为正&#xff1b; 定义底盘坐标系为αβ&…

02-1.CSS边框,边界,布局相关笔记

目录 CSS盒子模型 padding内填充 边框 边框属性 border-radius margin外边距 CSS盒子模型 Content(内容): 盒子的内容&#xff0c;显示文本和图像 >>>>类似word 文字A&#xff0c;改变字体与大小padding: 用于控制内容与边框之间的距离 …

android仿ios弹框_在“提示”框中:iOS外观(在Android上运行),Google Maps作为Time Machine,下载Wii游戏保存...

android仿ios弹框Once a week we round up some great reader tips and share them with everyone. Read on to see how to make your Android phone look like iOS, use a Google Maps mashup like a time machine, and download Wii game saves. 每周一次&#xff0c;我们收集…

使用 C# 开发的摸鱼背单词软件 ToastFish

你好&#xff0c;这里是 Dotnet 工具箱&#xff0c;定期分享 Dotnet 有趣&#xff0c;实用的工具和组件&#xff0c;希望对您有用&#xff01;摸鱼神器ToastFish 是一个使用 C# 开发的桌面软件&#xff0c;由 Uahh 开发&#xff0c; 这是一个利用Windows通知栏背单词的软件&…

03.JavaScript对DOM操作

JavaScript引入方式 外部引入 在head或者body中&#xff0c;添加以下代码 <script type"text/javascript" src"js/demo.js"></script> 内部引入 在head或body中&#xff0c;定义script标签&#xff0c;然后在script标签里面写js代码 <…

kotlin的suspend对比csharp的asyncawait

协程的出现大大降低了异步编程的复杂度&#xff0c;可以让我们像写同步代码一样去写异步代码&#xff0c;如果没有它&#xff0c;那么很多异步的代码都是需要靠回调函数来一层层嵌套&#xff0c;这个在我之前的一篇有介绍 rxjava回调地狱-kotlin协程来帮忙本篇文章主要介绍kotl…

file协议 控制面板_如何在Windows File Explorer导航窗格中显示控制面板和回收站

file协议 控制面板By default, the Windows File Explorer’s sidebar is divided into big categories like Quick Access, This PC, Network, and so on. But a quick setting change can make your navigation pane look a bit more like the traditional tree you’d see i…

过滤器(Filter)

1 什么是过滤器 过滤器JavaWeb三大组件之一&#xff0c;它与Servlet很相似&#xff01;不它过滤器是用来拦截请求的&#xff0c;而不是处理请求的。 当用户请求某个Servlet时&#xff0c;会先执行部署在这个请求上的Filter&#xff0c;如果Filter“放行”&#xff0c;那么会继…

发布适用于 .NET 7 的 .NET MAUI

点击上方蓝字关注我们&#xff08;本文阅读时间&#xff1a;6分钟)我们在六个月前向您介绍了 .NET 多平台应用程序 UI (MAUI)&#xff0c;现在我们很高兴地宣布 .NET MAUI 在我们的下一个主要版本 .NET 7 中普遍可用。在此短的时间范围内&#xff0c;我们在 .NET MAUI 中的主要…

03:数据结构 栈、队列、链表与数组

算法其他篇 目录&#xff1a; 1.1 数据结构中的一些概念1.2 栈&#xff08;stack&#xff09;1.3 队列1.4 链表1.5 python中字典对象实现原理1.6 数组1.1 数据结构中的一些概念 返回顶部 1、数据结构是什么 1、简单来说&#xff0c;数据结果就是设计数据以何种方式存储在计…

力登:以智能化管理提升数据中心服务能力成熟度

2017年2月28日&#xff0c;由全国信息技术标准化技术委员会信息技术服务分技术委员会指导的《信息技术服务数据中心服务能力成熟度模型》发布&#xff0c;在业界首次提出“数据中心服务能力成熟度”概念&#xff0c;使得数据中心的管理真正实现了数字化和持续优化&#xff0c;是…

基于.NET 7 的 WebTransport 实现双向通信

Web Transport 简介WebTransport 是一个新的 Web API&#xff0c;使用 HTTP/3 协议来支持双向传输。它用于 Web 客户端和 HTTP/3 服务器之间的双向通信。它支持通过 不可靠的 Datagrams API 发送数据&#xff0c;也支持可靠的 Stream API 发送数据。因为 HTTP/3 使用了基于 UDP…

Django01: 安装/基础命令/设置笔记

安装 按官网版本支持&#xff0c;现在比较适合使用1.11版本。 下载安装命令 pip3 install django1.11.9 新建项目 django-admin startproject mysite 运行项目 python manage.py runserver 127.0.0.1:8000 运行相关 目录介绍 mysite/ ├── manage.py # 管理文件 └…

线上问题随笔记录数据库连接池问题

修改方法 转载于:https://www.cnblogs.com/lvgg/p/8581506.html

数据底座_体验当今计算机的未来:通过智能底座将您的Galaxy S4变成PC

数据底座Have you ever thought that Smartphones these days are so advanced they could actually replace the PC in your everyday computing life? Today, we here at HTG will review using the Galaxy S4 with the “Smart Dock Multimedia Hub” as a PC replacement.…

如何实现 WPF 代码查看器控件

如何实现 WPF 代码查看器控件CodeViewer作者&#xff1a;WPFDevelopersOrg - 驚鏵原文链接[1]&#xff1a;https://github.com/WPFDevelopersOrg/WPFDevelopers框架使用.NET40&#xff1b;Visual Studio 2019;代码展示需要使用到AvalonEdit是基于WPF的代码显示控件&#xff0c;…