Udemy The Web Developer Bootcamp - CSS

最新推荐文章于 2024-10-18 21:23:17 发布

weixin_45673138

最新推荐文章于 2024-10-18 21:23:17 发布

阅读量275

点赞数

分类专栏： web developer bootcamp 文章标签： css

本文链接：https://blog.csdn.net/weixin_45673138/article/details/105927988

版权

web developer bootcamp 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Intro to CSS

定义
cascading style sheets
skin of your website
general Rule

selector {
	property: value;
	antherProperty: value;
}

/*make all h1's purple and 56px font*/
h1{
	color: purple;
	font-size:56px;
}

/*give all img's a 3px red border*/
img {
	border-color: red;
	border-width: 3px;
}

单独给某一个要素改style （不推荐）
不推荐原因：1. 麻烦，如果要改多个地方时，需要逐一修改
2 原则是把CSS代码和HTML分开，want css self-retained, in its own file

<li style="color: purple;">playing guitar</li>

Style tag (nested in html, still NOT GOOD)

<html>
<head>
	<title>About Rusty</title>
	<style type="text/css">
		li{
			color:red;  /*选择了所有的li，全部改成red*/
		}
		h1 {
			color: purple;
		}
	</style>

</head>
</html>

Link Tag

单独写一个.css结尾的CSS文件，然后在HTML里面link到该文件

<link rel="stylesheet" type="text/css" href="url(place to find the css file eg: app.css">

CSS Colors

Built In Color
查看代码对应的颜色： https://colours.neilorangepeel.com/
Hexadecimal - Base 16, 16进制
格式： # + 6位代码（from 0 - F)

前两位：how much RED in color
中两位： GREEN
后两位： BLUE

两种方法选择color 代码：
A colorpicker – 直接复制代码 eg. #0011EF
RGB – 红绿蓝（0 - 255）
syntax:

h1{
	color: rgb(0,255,0);  /*注意要有分号结尾*/
}

RGBA
4个channel 前三个范围和RGB一样，第四个范围（0.0 - 1.0），表示透明度

hi{
	color: rgba(0,200,100,3);
}

Color and Background

背景颜色 or 图片

h4{
	background: rgb(255,100,23);
}

body{
   brackground: pink; /* 整个网页背景变为粉色*/
}

body{
	background: url(http:// ..........jpg);    /*以图片作为背景*/
	background-repeat: no-repeat; /*图片过小不会拼接，但是会有大量空白*/
	background-size:cover; /*拉伸图片覆盖整个网页，但是分辨率不高时会模糊*/

	
}

边框

h1{
	border-color: purple;
	border-width: 5px;
	border-style: solid;
	/*只有三个都设置了才会显示边框*/

	border: 5px solid purple;  
	/*两种syntax的功效一样*/
}

Elements, ID and Class

=======HTML=========
<div>
	<p class="highlight">You say yes</p>
	/*把要统一做变化的地方归为一个class*/
</div>

<div>
	<p class="highlight">You say goodbye</p>
	<p id="special">I say hello</p>
	/*把这句话命名一个ID，在CSS里可以单独对这个ID做style,在一个HTML里这个ID只能出现一次*/
</div>

<ul>
	<li class="completed">
		<input type="checkbox" checked>
		/*checked表示方框已打钩*/
		Walk Rusty
	</li>
</ul>

=======css=========
div{
	background: purple;
}
p{
	color: yellow;
}
#special{
	background: yellow;
}

.highlight{
	text-decoration: line-through;
}

inspect element

谷歌浏览器打开HTML后，右键点inspect element，可以同时看代码和效果，用来debug, 右下角可以看CSS style

More Advanced Selectors

※ select everything

*{
border: 1px solid lightgrey;
}

Descendant Selector

li a{
}
选择HTML里面每个在list里面的a

li .hello{
}
选择在在li里标记为class hello的

Adjacent Selector

h4 + ul{
	border: 4px solid red;
}
选择h4后面所有跟了ul的

Attribute Selector

a[href="http://www.google.com"]{
	background: blue;
}

input[type="checkbox"]{
	background: blue;
}

Nth of type

ul:nth-of-type(3){
	background: purple;
}
选择HTML里第3个UL

nth-of-type(even)
选择每个偶数

Inherited 和 Specificity

Inherited 下级内容会自动继承上级内容的style
Specificity 多个Style指向同一个内容
more about specificity https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Specificity 优先级的可视化网站 https://specificity.keegan.st/