[udemy]WebDevelopment

Your First CSS(Cascading Style Sheets)

Cascading means it always takes selector that is at the end 即后面的可以覆盖前面的。比如

在以下css文件中定义了两次 <p></p> 的颜色，最终它会呈现green。

 h2{

     color: red;

 }

 p{

     color: pink;

 }

 p{

     color: green;

 }

syntactic rule is very straightforward:

Selector{

    Property: value;

}

How to comment:

command + /

比如我们很喜欢某个网站的feature

we can right click

do'inspect'

我想<h2>Home</h2>变成红色，怎么办

 <!DOCTYPE html>

 <html>

 <head>

     <title>CSS learning</title>

 </head>

 <body>

     <header>

         <ul>

             <li>Home</li>

             <li><a href="about.html">About</a></li>

             <li><a href="login.html">login</a></li>

         </ul>

     </header>

     <section>

         <h2>Home</h2>

         <p>Lollll</p>

     </section>

 </body>

 </html>

新一个css文件

但是refresh之后，为何index.html的h2没变色？

Obviously

How does index.html know style.css exist ?

We need to link each other

So we add link in the <head></head>

 <!DOCTYPE html>

 <html>

 <head>

     <title>CSS learning</title>

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

 </head>

 <body>

     <header>

         <ul>

             <li>Home</li>

             <li><a href="about.html">About</a></li>

             <li><a href="login.html">login</a></li>

         </ul>

     </header>

     <section>

         <h2>Home</h2>

         <p>Lollll</p>

     </section>

 </body>

 </html>

And make sure these two files in the same folder

we can create multiply style sheets

Beside <1>creating style.css file, we can also <2>'inline style' which is by specifying within the element

 <!DOCTYPE html>

 <html>

 <head>

     <title>CSS learning</title>

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

 </head>

 <body>

     <header style="background-color: yellow">

         <ul>

             <li>Home</li>

             <li><a href="about.html">About</a></li>

             <li><a href="login.html">login</a></li>

         </ul>

     </header>

     <section>

         <h2>Home</h2>

         <p>Lollll</p>

     </section>

 </body>

 </html>

<3> using 'style' tags inside of <head></head>

 <!DOCTYPE html>

 <html>

 <head>

     <title>CSS learning</title>

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

     <style >

         li{

             background-color: purple;

         }

     </style>

 </head>

 <body>

     <header style="background-color: yellow">

         <ul>

             <li>Home</li>

             <li><a href="about.html">About</a></li>

             <li><a href="login.html">login</a></li>

         </ul>

     </header>

     <section>

         <h2>Home</h2>

         <p>Lollll</p>

     </section>

 </body>

 </html>

CSS Properties

recommend website for CSS Properties : CSS Tricks

make your text in the center

text-align: center;

define the border

border: 5px solid purple;

add background image

/*本地图片*/

body{

    background-image: url(backgroundimage.jpg);

}

/*网上图片*/

body{

    background-image: url(www.unsplash.com/image2);

}

make background image fits the screen

body{

    background-image: url(www.unsplash.com/image2);

    background-size: cover;

}

add cursor(光标)

p{

    color: pink;

    cursor: pointer;

}

display in line

li{

    list-style: none;

    display: inline-block;

}

find the specific color: paletton.com

choose hex or RGB whichever way

h2{

    color: #AA9739;

    text-align: center;

    border: 5px solid rgb(170, 151, 57);

}

Cascading Style Sheets at the most basic level it indicates that the order of CSS rules matter.

.class

we can give any value we want, whatever we want to call it

<p class="webtext">Lollll</p>

.webtext{

    border:  5px dashed purple;

}

#id

similar to .class except that you can use only once

    <div id="div1">

            <p class="webtext">Lollll</p>

            <p>Lollll</p>

            <p>Lollll</p>

        </div>

#id{

    background: blue;

}

element

p{

    color: green;

}

element, element

h2, p {

    color: #AA9739;

    text-align: center;

    border: 5px solid rgb(170, 151, 57);

}

element element

I want you to select all 'p' s inside 'h2'

<h2>Home<p>Jennifer's home</p></h2>

h2  p {

    color: #AA9739;

    text-align: center;

    border: 5px solid rgb(170, 151, 57);

}

element > element

I want to select all 'p's that have a parent of 'h2'

h2 > p {

    color: #AA9739;

    text-align: center;

    border: 5px solid rgb(170, 151, 57);

}

element + element

I want to select any 'p' that is exactly after an 'h2' element

h2 + p {

    color: #AA9739;

    text-align: center;

    border: 5px solid rgb(170, 151, 57);

}

:hover

nothing happens but when I hover my mouse, it changes the style to what we just wrote down

h2 + p: hover{

    color: #AA9739;

    text-align: center;

    border: 5px solid rgb(170, 151, 57);

}

:last-child

only the last child of each webtext changes

.webtext:last-child{

    border:  5px dashed purple;

}

:first-child

same as last-child

!important (not recommended)

overrides any of the css rules and say, hey I don't care what anybody else says , 'p' should always be pink

p{

    color: pink !important;

    cursor: pointer;

}

p{

    color: green;

}

add underline to text

p{

    text-decoration: underline;

}

change text to uppercase

p{

    text-transform: uppercase;

}

make space between text

p{

    line-height: 20px;

}

change font style

font-family: "Times New Roman", Georgia; means if former one doesn't exist, pick the latter one

Use Google Fonts, we can add some specific fonts in own website

当然，这样会减慢你的网页反应速度

因为你的字体需要通过Google的链接响应

p{

    line-height: 20px;

    font-style: italic;

    font-weight: bold;

    font-size: 80%;

    font-family: "Times New Roman", Georgia;

}

add image

<img src="https://previews.123rf.com/images/tharun15/tharun151606/tharun15160600056/58764289-a-circular-geometric-design-for-summer-solstice-day-in-june-on-a-white-background.jpg"  width="50px" height="40">

critical render path

For now, sever is our computer

we request html

and the browser check I need css file

grab css file

hold on, the browser check I need font file

after that, it could render the page(display)

So you won't be able to render a web page until you receive css file and

sometimes font files you also have to wait for the font file to render the page

So if want your website faster, use your own font files and don't make css file too big

So you can enter you css code into minify CSS https://www.cleancss.com/css-minify/ to make it seem smaller

Flexbox

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://flexboxfroggy.com/

<!DOCTYPE html>

<html>

<head>

    <title>CSS</title>

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

</head>

<body>

    <h1>Life in the wild</h1>

    <div class="container">

        <img src="https://static.pexels.com/photos/52500/horse-herd-fog-nature-52500.jpeg">

        <img src="https://static.pexels.com/photos/66898/elephant-cub-tsavo-kenya-66898.jpeg">

        <img src="https://static.pexels.com/photos/213399/pexels-photo-213399.jpeg">

        <img src="https://static.pexels.com/photos/158471/ibis-bird-red-animals-158471.jpeg

">

        <img src="https://static.pexels.com/photos/133459/pexels-photo-133459.jpeg">

        <img src="https://static.pexels.com/photos/50988/ape-berber-monkeys-mammal-affchen-50988.jpeg">

    </div>

</body>

</html>

.container{

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

}

h1{

    font-family: fantasy;

    font-size: 3em;

    border-bottom: 2px solid pink;

    border-right: 2px solid pink;

    width: 400px;

    text-align: center;

}

img{

    width: 450px;

    height: 300px;

    margin: 10px;

}

Exercise

 <!DOCTYPE html>

 <html>

 <head>

     <title>RoboPage</title>

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

     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

 </head>

 <body>

     <h1>Robot Friend</h1>

     <div class="robots">

         <div class="android">

             <div class="head">

                 <div class="eyes">

                     <div class="left_eye"></div>

                     <div class="right_eye"></div>

                 </div>

             </div>

             <div class="upper_body">

                 <div class="left_arm"></div>

                 <div class="torso"></div>

                 <div class="right_arm"></div>

             </div>

             <div class="lower_body">

                 <div class="left_leg"></div>

                 <div class="right_leg"></div>

             </div>

         </div>

     </div>

 </body>

 </html>

 h1 {

     text-align: center;

     font-family: 'Roboto', sans-serif;

 }

 .robots {

     flex-wrap: wrap;

     display: flex;

     justify-content: center;

 }

 .head,

 .left_arm,

 .torso,

 .right_arm,

 .left_leg,

 .right_leg {

      background-color: #5f93e8;

 }

 .head {

     width: 200px;

     margin: 0 auto;

     height: 150px;

     border-radius: 200px 200px 0 0;

     margin-bottom: 10px;

 } 

 .eyes {

     display: flex

 }

 .head:hover {

     width: 300px;

     transition: 1s ease-in-out;

 }

 .upper_body {

     width: 300px;

     height: 150px;

     display: flex;

 } 

 .left_arm, .right_arm {

     width: 40px;

     height: 125px;

     border-radius: 100px;

 } 

 .left_arm {

     margin-right: 10px;

 } 

 .right_arm {

     margin-left: 10px;

 } 

 .torso {

     width: 200px;

     height: 200px;

     border-radius: 0 0 50px 50px;

 } 

 .lower_body {

     width: 200px;

     height: 200px;

     /* This is another useful property. Hmm what do you think it does?*/

     margin: 0 auto;

     display: flex;

 } 

 .left_leg, .right_leg {

     width: 40px;

     height: 120px;

     border-radius: 0 0 100px 100px;

 } 

 .left_leg {

     margin-left: 45px;

 } 

 .left_leg:hover {

     -webkit-transform: rotate(20deg);

     -moz-transform: rotate(20deg);

     -o-transform: rotate(20deg);

     -ms-transform: rotate(20deg);

     transform: rotate(20deg);

 }

 .right_leg {

     margin-left: 30px;

 }

 .left_eye, .right_eye {

     width: 20px;

     height: 20px;

     border-radius: 15px;

     background-color: white;

 } 

 .left_eye {

     /* These properties are new and you haven't encountered

     in this course. Check out CSS Tricks to see what it does! */

     position: relative;

     top: 100px;

     left: 40px;

 } 

 .right_eye {

     position: relative;

     top: 100px;

     left: 120px;

 }

Responsive UI

should be a priority when building websites

It would show you what your website will look like on iPhone

Reponsive means your website, on no matter what platform, looks good, no cut-offs

[udemy]WebDevelopment_CSS的更多相关文章

Udemy上免费的angualr2视频教程分享
福利大分享本文作者:苏生米沿本文地址:http://blog.csdn.net/sushengmiyan/article/details/52592518 一晚上听了10几节课程,整体感觉很不错的 ...
[Udemy] Recommender Systems and Deep Learning in Python
1. Welcome 主要讲四部分内容: non-personized systems popularity: 基于流行度或者最大利益化的推荐. 缺点也明显:你可能在特殊地方有些特殊需求, 或者你本来 ...
Udemy - Angular 2 - The Complete Guide 笔记
1. install > npm install -g angular-cli 2. create app > ng new first-app 3. build app > cd ...
[udemy]WebDevelopment_HTML5
Build Your First Website 装一个subline text HTML default rule tags with opening and closing <!DOCTY ...
[udemy]WebDevelopment_History of The Web
WWW vs Internet For the begining, Internet was there. it was for the academics among universities Th ...
[udemy]WebDevelopment_How the Internet Works
Browsing the web Enter google.com, who is this google.com This question gets asked all the way down ...
[udemy]WebDevelopment_Bootstrap,Templates
Bootstrap Introduction Bootstrap 相对于CSS, JS 就像PPT模板相对于PPT 说白了就是前人已经做好了(pre-build)很多模板,你可以直接拿来主义 Boot ...
[Udemy] ES 7 and Elastic Stack - part 3
Section 7: Analyzing Log Data with the Elastic Stack
[Udemy] ES 7 and Elastic Stack - part 2
Section 3: Searching with Elasticsearch query with json 分页返回 Sort full text 的内容不能用来sort, 比如movie的 ti ...

随机推荐

eclipse加入c标签
在MyEclipse中使用jstl标签只需导读jstl.jar就能使用,但是在Eclipse中还需要一点小套路步骤: 一.导入jstl.jar 二.导入导入standard.jar 三.在WEB-I ...
how to play
陷入难以言说的深深的绝望无力,无助,暗无天日,看不到光明,看不到未来,不知道何去何从但我依然坚信这道坎一定可以过去,黎明前的夜总是黑暗的,属于我的光明终将来临沼泽中的旅行者,只要还没死掉,就还没 ...
mcc,mex,mbuild
mcc将M文件转换成C/C++文件和相应的MEX包裹文件(需要Matlab编辑器),但在特定条件下可以自动调用mbuild或者mexmex将C/C++文件(入口函数为mexfunction())编译成 ...
Redis之数据持久化RDB与AOF
Redis之数据持久化RDB与AOF https://www.cnblogs.com/zackku/p/10087701.html 大家都知道,Redis之所以性能好,读写快,是因为Redis是一个内 ...
windows下Java调用mysql的客户端备份和恢复
这种东西没啥好聊的,其实就是Java执行dos界面下的命令,不过有些要注意就是了,真实dos下面的命令和java调用的windows系统的接口其实还是有一点不同. /** * @param hostI ...
Jenkins搭建.NET自动编译发布本地环境
最近在做一个团队项目的时候,用到了自动编译发布部署环境[也可以说是持续集成],于是顺便学习了下这个环境的搭建过程. 持续集成持续集成是一种软件开发实践,即团队开发成员经常集成它们的工作,通常每个成员 ...
再看Spring Could微服务的关键组件
Consul是用go开发的开源注册中心服务,内置服务发现与注册.raft一致性协议实现.健康检查.多数据中心等方案.与Eurker相比,consul还能对异构服务如rpc提供支持. 作为微服务系统的核 ...
对类 sizeof
sizeof一个类的时候,都什么会被计算?静态成员会被计算进来么?如果这是一个子类,它的父类成员会被计算么? #include <iostream> using namespace std ...
【python】FTP客户端
Python中默认安装的ftplib模块定义了FTP类,其中函数有限,可用来实现简单的ftp客户端,用于上传或下载文件,函数列举如下 ftp登陆连接 from ftplib import FTP #加 ...
hackerrank Week of Code 31
https://www.hackerrank.com/contests/w31/challenges Beautiful Word 模拟 Accurate Sorting 检查每个数字距离原位是否都不 ...

[udemy]WebDevelopment_CSS

[udemy]WebDevelopment_CSS的更多相关文章

随机推荐

热门专题