✅作者简介：一位材料转码农的选手，希望一起努力，一起进步！
📃个人主页：@每天都要敲代码的个人主页
🔥系列专栏：Web前端
目录
（1）什么是CSS，有什么作用？
①CSS(Cascading Style Sheet)：层叠样式表语言！
②CSS的作用是：修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。 CSS好比是HTML的化妆品一样！
③HTML还是主体，CSS依赖HTML；CSS的存在就是修饰HTML，所以新建的文件还是xx.html文件。
（2）在HTML页面中嵌套使用CSS的三种方式：
①第一种方式：内联方式
在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。
语法格式：
<标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签> ②第二种方式：样式块方式
在head标签中使用style块，这种方式被称为样式块方式。
语法格式：
<head>
<style type="text/css">
选择器 {
样式名 : 样式值;
样式名 : 样式值;
.....
}
</style>
</head>③第三种方式：引入外部的.CSS文件
链入外部样式表文件，这种方式最常用。（将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了）这种方式易维护，维护成本较低。
语法格式：
<link type="text/css" rel="stylesheet" href="css文件的路径" />
（1）style的参数可以是：
width 宽度样式
height 高度样式
background-color 背景色样式
display 布局样式（none表示隐藏，block表示显示，默认是显示）
（2）还可以添加边框，需要三个参数：
border-width(边框宽度)、border-style(边框线)、border-color(边框线颜色)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一种方式：内联方式</title>
</head>
<body>
<!--设置一个盒子-->
<div style="width: 100px; height: 100px; background-color: #CCFFFF; display: block;">
</div>
<!--给盒子增加边框-->
<div style="width : 100px; height: 100px; background-color : aqua; display: block;
border-width: 1px; border-style: solid; border-color: red;" >
</div>
<!--增加边框的另一种方式：border : 1px solid black;-->
<div style="width: 100px; height: 100px; background-color: #CCFFFF; display: block;
border: 1px solid red;">
</div>
</body>
</html>
①id选择器：
使用id选择器，不能够重复使用，因为id是唯一性标识，每次使用都要重新编写代码，使用时前面加上#：#id
语法格式：
#id{
样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;
....}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二种方式：样式块方式</title>
<!--id选择器-->
<style type="text/css">
#username{
font-size: 30px;
color: orangered;
}
</style>
</head>
<body>
<span id="username">你好，123</span>
</body>
</html> 
②标签选择器：
使用标签选择器，不够灵活，只要我们使用了这个标签，所有的样式就都是相同的；标签选择器作用的范围比id选择器广，使用时前面什么都不用加：标签名
语法格式：
标签名{
样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;
....}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二种方式：样式块方式</title>
<!--标签选择器-->
<style>
div{
width : 100px;
height: 100px;
background-color: black;
border: 1px solid red
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
③类选择器：
使用类选择器，相对比较灵活，只要是类名相同就是同一类，就可以使用同一种样式；使用时前面加上.：.类名
语法格式：
.类名{
样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;
....}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二种方式：样式块方式</title>
<!--标签选择器-->
<style>
.myclass{
width: 60px;
height: 30px;
border: 1px solid red;
color: darkred;
}
</style>
</head>
<body>
<!--input和select有相同的类名-->
姓名<input type="text" class="myclass"></input> <br>
爱好<select class="myclass">
<option>高中</option>
<option>本科</option>
<option>硕士</option>
</select>
</body>
</html>
固定格式：<link type="text/css" rel="stylesheet" href="css文件的路径" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第三种方式：引入外部独立CSS文件</title>
<!--导入文件-->
<link type="text/css" rel="stylesheet" href="1.css">
</head>
<body>
<!--把超链接的下划线去了-->
<a href="http://www.baidu.com">百度</a>
</body>
</html>
.css文件，这里使用的是标签选择器
/* 这是一个标签选择器
同一个目录下创建，独立的.css文件，用来去除下划线*/
a{
text-decoration: none;
}
1. 边框
div{
border : 1px solid red;
}
div{
border-width : 1px;
border-style : solid;
border-color : red;
}2. 隐藏
div{
display : none;
}3. 字体
div{
font-size : 12px;
color : red;
}4. 文本装饰
a{
text-decoration : none;
}
a{
text-decoration : underline;
}5. 列表
ul{
list-style-type : none;
}6. 设置鼠标悬停效果
:hover7. 定位
div{
position : absolute;
left : 100px;
top : 100px;
}8. 鼠标小手
div{
cursor : pointer;
}9. 列表样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--去掉前面的标记-->
<style type="text/css">
ul{
list-style-type: none;
}
</style>
</head>
<body>
<ul>
<li>安徽</li>
<li>阜阳</li>
<li>太和</li>
</ul>
</body>
</html>
10. 绝对定位（定的是左上角的点）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--绝对定位：定的是是左上角的那个点-->
<style type="text/css">
#mydiv{
background-color: red;
border: 1px black solid;
width: 300px;
height: 300px;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<ul>
<div id="mydiv"></div>
</ul>
</body>
</html>
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我试图获取一个长度在1到10之间的字符串，并输出将字符串分解为大小为1、2或3的连续子字符串的所有可能方式。例如:输入:123456将整数分割成单个字符，然后继续查找组合。该代码将返回以下所有数组。[1,2,3,4,5,6][12,3,4,5,6][1,23,4,5,6][1,2,34,5,6][1,2,3,45,6][1,2,3,4,56][12,34,5,6][12,3,45,6][12,3,4,56][1,23,45,6][1,2,34,56][1,23,4,56][12,34,56][123,4,5,6][1,234,5,6][1,2,345,6][1,2,3,456][123
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No
我有一大串格式化数据(例如JSON)，我想使用Psychinruby同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
question的一些答案关于redirect_to让我想到了其他一些问题。基本上，我正在使用Rails2.1编写博客应用程序。我一直在尝试自己完成大部分工作(因为我对Rails有所了解)，但在需要时会引用Internet上的教程和引用资料。我设法让一个简单的博客正常运行，然后我尝试添加评论。靠我自己，我设法让它进入了可以从script/console添加评论的阶段，但我无法让表单正常工作。我遵循的其中一个教程建议在帖子Controller中创建一个“评论”操作，以添加评论。我的问题是:这是“标准”方式吗？我的另一个问题的答案之一似乎暗示应该有一个CommentsController参
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.