css语言介绍_CSS的非常介绍

css语言介绍

About two weeks ago, I was still in the bronze age of frontend web programming. I was simply able to render information onto an HTML page using RAILS. Without my partner’s assistance and his expertise, our HTML project page would have been painted with layers of text killing all our visitors with sheer boredom. This week I finally discovered CSS and I felt like a caveman that had discovered fire.

大约两周前，我还处在前端Web编程的青铜时代。 我只是能够使用RAILS将信息呈现到HTML页面上。 没有我的伴侣的协助和他的专业知识，我们HTML项目页面上的文字将被漆成多层，无聊地杀死了我们所有的访客。 这个星期我终于发现了CSS，感觉就像是一个发现火的穴居人。

I would like to share some of my simple experiences with utilizing CSS for the first time.

我想分享一些我第一次使用CSS的简单经验。

The first lesson that I learned about CSS was adding a picture to your HTML page, which can be done by linking to an image URL per the code below:

我从CSS中学到的第一课是在HTML页面中添加图片，可以通过以下代码链接到图片URL：

body {
background:url('https://img1.mashed.com/img/uploads/2017/02/coke.jpg');
background-repeat: no-repeat;
background-size: cover;
}

Want to read this story later? Save it in Journal.

想稍后再读这个故事吗？ 将其保存在 Journal中 。

With some luck, the picture of Coke should render as the background of an HTML webpage. The below is a picture of my HTML page (so far, so good).

幸运的是，可乐的图片应呈现为HTML网页的背景。 下面是我HTML页面的图片(到目前为止，很好)。

The other two lines of code included in the code-box above serves to stop my picture from repeating itself across the page in the event that it is smaller than the screen size and cover the page entirely.

上面的代码框中包含的其他两行代码，可防止我的图片在小于屏幕尺寸的情况下在页面上重复出现，并完全覆盖了页面。

My second lesson was setting the font size for the whole page. By setting the value of the font-size inside the HTML with open/close brackets, we can set the font for the entire page. The code is as per below:

我的第二课是设置整个页面的字体大小。 通过使用打开/关闭括号在HTML内部设置字体大小的值，我们可以为整个页面设置字体。 代码如下：

html{ 
font-size: 16px;
}

My third lesson took me quite a bit of time to learn. I was (still am) just a low-level googler and I was unable to quickly find how to render a background image that was already saved into my computer onto the HTML page. I took some time rummaging though Al Gore’s internet and realized I just had to insert a relative path into the URL parentheses of the background variable in CSS. Using the code below, I was able to render some McNuggets as the background for one of my elements on the HTML page.

我的第三堂课花了我很多时间来学习。 我(仍然是)只是一个低级的googler，我无法快速找到如何将已经保存到计算机中的背景图像渲染到HTML页面上。 我花了一些时间在Al Gore的互联网上翻阅，意识到我只需要在CSS背景变量的URL括号中插入相对路径即可。 使用下面的代码，我能够渲染一些McNuggets作为HTML页面上我的元素之一的背景。

.header h1{
font-size: 5rem;
color:white;background: url(‘nuggets.png’);background-repeat: no-repeat;
background-size: auto;
width: 500px;

During the journey of rendering some Chicken Nuggets, I also learned that I can set the width of the element and the color of the font inside the HTML element. I would like to think the process of searching for what we want to know will bring additional information of what we are able to do along with it. As we search for more and more answers, we will have more tools to answer the inevitable questions that come with knowledge.

在渲染一些鸡块的过程中，我还了解到可以在HTML元素内设置元素的宽度和字体的颜色。 我想认为，搜索我们想知道的内容的过程将带来有关我们能够做的事情的附加信息。 随着我们寻找越来越多的答案，我们将拥有更多的工具来回答知识带来的不可避免的问题。

I hope to learn more CSS as I continue to walk down this coding path. Cheers for reading this far! Please enjoy a video of the CEO of Pied Piper singing about McNuggets

我希望在继续沿着这条编码路径前进的过程中学习更多CSS。 欢呼阅读到目前为止！ 请欣赏Pied Piper首席执行官演唱有关McNuggets的视频

演示地址

s

s

Best Regards,

最好的祝福，

James Wu

吴

📝 Save this story in Journal.

story将这个故事保存在Journal中 。

👩‍💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.

every‍💻每个星期天早晨，您都可以在收件箱中等待本周最值得关注的Tech故事。 阅读Tech Newsletter中的“值得注意” 。

翻译自: https://medium.com/@guojing.wu/a-very-intro-to-css-7b7fa32a2b3

css语言介绍