草庐IT

HTML5+CSS3(六)-全面详解（学习总结---从入门到深化）

童小纯呀 2023-03-28 原文

目录

​​CSS简介​​

​​ CSS概念​​

​​为什么需要CSS​​

​​CSS和HTML之间的关系​​

​​ 语法​​

​​学习效果反馈​​

​​ CSS的引入方式​​

​​ 内联样式（行内样式）​​

​​内部样式​​

​​外部样式（推荐）​​

​​导入式（了解）​​

​​@import和link的区别​​

​​ 学习效果反馈​​

​​ CSS样式表特征​​

​​ 继承性​​

​​ 层叠性​​

​​ 优先级​​

​​ CSS注释​​

​​学习效果反馈 ​​

​​ 基础选择器一​​

​​ 全局选择器​​

​​元素选择器​​

​​学习效果反馈​​

​​ 基础选择器二​​

​​编辑ID选择器​​

​​ 合并选择器​​

​​选择器的优先级​​

​​学习效果反馈 ​​

​​ DIV+CSS布局​​

​​ 布局时常用的属性​​

​​ 布局-上中下结构​​

​​学习效果反馈​​

​​布局实操一 ​​

​​布局实操二​​

CSS简介

 CSS概念

CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表
CSS文件后缀名为 .css
CSS用于HTML文档中元素样式的定义

为什么需要CSS

使用css的目的就是让网页具有美观一致的页面

CSS和HTML之间的关系

 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

 选择器通常是您需要改变样式的 HTML 元素 每条声明由一个属性和一个值组成属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开

<style>
h1{
color: blue;
font-size: 12px;
}
</style>

学习效果反馈

1.下列关于CSS基础语法描述错误的是：属性与属性值之间用分号隔开

 CSS的引入方式

 内联样式（行内样式）

要使用内联样式，你需要在相关的标签内使用样式（style）属性。 Style 属性可以包含任何 CSS 属性

<p style="background: orange; font-size: 24px;">CSS<p>

内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使
用 <style> 标签在文档头部定义内部样式表

 

<head>
<style>
h1 {
background: red;
}
</style>
</head>

外部样式（推荐）

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使
用外部样式表的情况下，你可以通过改变一个文件来改变整个站点
的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部
<link rel="stylesheet" type="text/css" href="xxx.css">

导入式（了解）

此种方式使用率比较低,因为会影响加载速度

<style type="text/css">
@import url("css文件路径");
</style>

@import和link的区别

 学习效果反馈

1.外部CSS样式的引入方式，以下正确的是：

<link rel="stylesheet" type="text/css" href="xxx.css">

 CSS样式表特征

 继承性

指被包含在内部的标签可以拥有外部标签的样式，比如：text-、 font-、line-height，但有些属性不能继承，比如：border、 padding、margin

 层叠性

简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最 后一次设置的属性值。例如对一个站点中的多个页面使用了同一套 CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针 对这些样式单独定义一个样式表应用到页面中。这些后来定义的样 式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设 置的样式效果

 优先级

样式定义冲突时，按照不同样式规则的优先级来应用样式 行内样式>内部样式（外部样式）

 CSS注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它
CSS注释以 /* 开始, 以 */ 结束,
/* 这是注释 */

学习效果反馈 

1.以下哪个不是CSS样式表特征：CSS注释

 基础选择器一

 全局选择器

可以与任何元素匹配，优先级最低，不推荐使用

*{
margin: 0;
padding: 0;
}

元素选择器

HTML文档中的元素， p、b、div、a、img、body 等。
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述
“共性”，无法描述某一个元素的“个性”
p{
font-size:14px;
}
再比如说，我想让“学完前端，继续学Java”这句话中的“前端”两个变
为红色字体，那么我可以用 <span> 标签把“前端”这两个字围起来，然
后给 <span> 标签加一个标签选择器
<p>学完了<span>前端</span>，继续学Java</p>
span{
color: red;
}

 类选择器

规定用圆点 . 来定义，针对你想要的所有标签使用

<h2 class="oneclass">你好</h2>
/*定义类选择器*/
.oneclass{
width:800px;
}

<h3 class="classone classtwo">我是一个h3啊</h3>
<h3 class="teshu" class="zhongyao">我是一个h3啊</h3> // 错误

学习效果反馈

1.下列代码哪个是类选择器使用方式：.title{color:red;}

 基础选择器二

ID选择器

针对某一个特定的标签来使用，只能使用一次。 css 中的 ID选择器 以 # 来定义
<h2 id="mytitle">你好</h2>
#mytitle{
border:3px dashed green;
}

 合并选择器

语法： 选择器1,选择器2,...{ }
作用：提取共同的样式，减少重复代码

.header, .footer{
height:300px;
}

选择器的优先级

CSS中,权重用数字衡量

元素选择器的权重为: 1

class选择器的权重为: 10

id选择器的权重为: 100

内联样式的权重为: 1000

优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器

学习效果反馈 

1.下列选择器优先级排序正确的是：行内样式 > ID选择器 > 类选择器 > 元素选择器

 DIV+CSS布局

 优点

 布局时常用的属性

 布局-上中下结构

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
<style>
.header {
height: 100px;
background-color: #fcc;
}
.content {
height: 400px;
background-color: #ff9;
}
.footer {
height: 100px;
background-color: #ccf;
}
</style>
布局-上中下-左右

<div class="container">
<div class="header"></div>
<div class="nav"></div>
<div class="content">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
<style>
.header {
width: 100%;
height: 100px;
background-color: red;
}
.nav {
width: 100%;
height: 50px;
background-color: pink;
}
.content {
width:100%;
height: 300px;
background-color: yellow;
}
.footer {
width: 100%;
height: 150px;
background-color: deepskyblue;
}
.left {
width: 33.33%;
height: 300px;
background-color: palegoldenrod;
float: left;
}
.center {
width: 33.33%;
height: 300px;
background-color: palegreen;
float: left;
}
.right {
width: 33.33%;
height: 300px;
background-color: palevioletred;
float: left;
}
</style>

学习效果反馈

1.以下哪个不是 DIV+CSS 布局的优点：对搜索引擎不友好

布局实操一 

<div class="box">
<div class="left">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="right"></div>
</div>
<style>
.box{
width: 500px;
height: 500px;
}
.left{
float: left;
width: 250px;
height: 500px;
}
.right{
float: right;
width: 250px;
height: 500px;
background-color: burlywood;
}
.top{
width: 250px;
height: 250px;
background-color: pink;
}
.bottom{
width: 250px;
height: 250px;
background-color: turquoise;
}
</style>

<div class="box">
<div class="left"></div>
<div class="right">
<div class="top"></div>
<div class="bottom">
<div class="b-left"></div>
<div class="b-right"></div>
</div>
</div>
</div>
<style>
.box{
width: 600px;
height: 600px;
}
.left{
float: left;
width: 200px;
height: 600px;
background-color: pink;
}
.right{
float: right;
width: 400px;
height: 600px;
}
.top{
width: 400px;
height: 300px;
background-color: springgreen;
}
.b-left{
float: left;
width: 200px;
height: 300px;
background-color: slateblue;
}
.b-right{
float: right;
width: 200px;
height: 300px;
background-color: tan;
}
</style>

布局实操二

 

<div class="phone">
<div class="left">
<img src="./images/1.webp" alt="">
</div>
<div class="right">
<div class="item">
<img src="./images/2.webp" alt="">
<h3>黑鲨4S</h3>
<p>磁动力升降肩键</p>
</div>
<div class="item">
<img src="./images/2.webp" alt="">
<h3>黑鲨4S</h3>
<p>磁动力升降肩键</p>
</div>
<div class="item">
<img src="./images/2.webp" alt="">
<h3>黑鲨4S</h3>
<p>磁动力升降肩键</p>
</div>
<div class="item">
<img src="./images/2.webp" alt="">
<h3>黑鲨4S</h3>
<p>磁动力升降肩键</p>
</div>
<div class="item">
<img src="./images/2.webp" alt="">
<h3>黑鲨4S</h3>
<p>磁动力升降肩键</p>
</div>
<div class="item">
<img src="./images/2.webp" alt="">
<h3>黑鲨4S</h3>
<p>磁动力升降肩键</p>
</div>
<div class="item">
<img src="./images/2.webp" alt="">
<h3>黑鲨4S</h3>
<p>磁动力升降肩键</p>
</div>
<div class="item">
<img src="./images/2.webp" alt="">
<h3>黑鲨4S</h3>
<p>磁动力升降肩键</p>
</div>
</div>
</div>
<style>
body{
background-color: #f1f1f1;
}
.phone{
width: 1300px;
height: 680px;
margin: 0 auto;
}
.left{
float: left;
width: 234px;
height: 680px;
margin-top: 10px;
}
.right{
float: right;
width: 1050px;
}
.item{
width: 250px;
height: 300px;
float: left;
margin-left: 10px;
background-color: #fff;
margin-top: 10px;
text-align: center;
}
</style>
深化详解sectionbrgtcss3html5选择器CSScssHtml/CSS前端开发

有关HTML5+CSS3(六)-全面详解（学习总结---从入门到深化）的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  3. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  4. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  5. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  6. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  7. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  8. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  9. LC滤波器设计学习笔记（一）滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》，侵权删。前言最近需要学习放大电路和滤波电路，但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放，所以也是相当从零开始学习了。滤波电路科普主要分类滤波器：主要是从不同频率的成分中提取出特定频率的信号。有源滤波器：由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波，最普通易于采用的无源滤波器结构是将电感与电容串联，可对主要次谐波（3、5、7）构成低阻抗旁路。无源滤波器：无源滤波器，又称

  10. SPI接收数据异常问题总结 - 2

    SPI接收数据左移一位问题目录SPI接收数据左移一位问题一、问题描述二、问题分析三、探究原理四、经验总结最近在工作在学习调试SPI的过程中遇到一个问题——接收数据整体向左移了一位（1bit）。SPI数据收发是数据交换，因此接收数据时从第二个字节开始才是有效数据，也就是数据整体向右移一个字节（1byte）。请教前辈之后也没有得到解决，通过在网上查阅前人经验终于解决问题，所以写一个避坑经验总结。实际背景：MCU与一款芯片使用spi通信，MCU作为主机，芯片作为从机。这款芯片采用的是它规定的六线SPI，多了两根线：RDY和INT，这样从机就可以主动请求主机给主机发送数据了。一、问题描述根据从机芯片手

随机推荐