CSS3学习 1
- 1.css 选择器
- 1.元素选择器
- 2.id选择器
- 3.类选择器
- 4.类选择器(区别标签)
- 5.引用两个类的HTML元素
- 6.通用选择器
- 7.分组选择器
- 2.css 使用
- 1.外部css
- 2.内部css
- 3.行内css
- 4.多个样式表
- 5.层叠顺序
- 3. css 颜色
- 1.背景色
- 2.设置文本颜色
- 3.设置边框颜色
- 4. 设置透明度
- 4.css 背景
- 1.页面背景色
- 2.图像做背景
- 3.图像背景（仅水平重复）
- 4.定位背景
- 5.固定背景图像
- 5.css 边框
- 1.边框属性
- 2.圆角
- 6.css 外边距和内边距
- 7.css 高度和宽度
1.css 选择器
选择器：需要设置样式的 HTML标签。理解：方便机器选择（需要设置样式的html标签）的标志。可以大致分四类，html标签本身，id，class，*。
1.元素选择器
元素选择器：元素就是标签的意思。作用范围：本文所有的此标签。
p {text-align: center;}
<p>每个p都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>
2.id选择器
id选择器：程序员给出唯一的id。作用范围：带此id的标签。
#para1 {text-align: center;}
<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>
3.类选择器
类选择器：程序员给出唯一的class。作用范围：所有带此class的标签。区别：一个class可以多个标签携带，一个id只能一个标签。
.center {text-align: center;}
<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p>
4.类选择器(区别标签)
类选择器(区别标签)：如果只想改某个标签下的class，而不是所有带class的标签。作用范围：某个标签下的class。记忆：p.center类似 p对象里面的center函数。.center意思是class里的center。
p.center {text-align: center;}
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落将是红色并居中对的。</p>
5.引用两个类的HTML元素
引用两个类的HTML元素：重点在于class里面可以写多个，进行样式叠加。记忆：既有xxx又有xxx。
p.center {text-align: center;}
p.large {font-size: 300%;}
<h1 class="center">这个标题不受影响</h1>
<p class="center">本段将是红色并居中对齐。</p>
<p class="center large">本段将是红色、居中对齐，并使用大字体。</p>
6.通用选择器
通用选择器：大家都能用。作用范围：所有标签。就像走近乐高店，大手一挥，“ all in ” 把店里的所有乐高积木全包了。
- {text-align: center;}
<p>页面上的每个元素都会受到样式的影响。</p>
<p id="para1">我也是！</>
<p>还有我！</p>
7.分组选择器
分组选择器：将标签写在一起作为一组。作用范围：组内成员都有份。记忆：，就像凳子，组内的抢凳子游戏总是少一个凳子。
h1, h2, p {text-align: center;}
<h1>Hello World!</h1>
<h2>更小的标题</h2>
<p>这是一个段落。</p>
2.css 使用
1.外部css
<link rel="stylesheet" href="/demo/css/mystyle.css">
2.内部css
<style>body {background-color: linen;}</style>
3.行内css
<p style="color:red;">这是一个段落。</p>
4.多个样式表
就是外部样式表（一般是常用的）里没有的，可以用内部css进行补充。
5.层叠顺序
行内的覆盖内部的，内部的覆盖外部的。 行内>内部>外部
3. css 颜色
Tomato = rgb(255, 99, 71) = #ff6347 = hsl(9, 100%, 64%) 是一种颜色，只是写法不同分别为rgb、十六进制、HSL。
1.背景色
background-color
<h1 style="background-color:DodgerBlue;">Hello World</h1>
2.设置文本颜色
color
<h3 style="color:Tomato;">Hello World</h3>
3.设置边框颜色
border
<h1 style="border: 2px solid Tomato;">Hello World</h1>
4. 设置透明度
下面的透明度是50%
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
4.css 背景
1.页面背景色
<style>body {background-color: lightblue;}</style>
2.图像做背景
<style>body {background-image: url("/i/paper.jpg");}</style>
3.图像背景（仅水平重复）
背景-重复：重复-水平。
body {
background-image: url(“/i/css/gradient_bg.png”);
background-repeat: repeat-x;
}
4.定位背景
背景(图片)不重复，背景位置右上，右边距200px是为了让背景图片不干扰文本，让body变窄。
body {
background-image: url(“/i/photo/tree.png”);
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
5.固定背景图像
类似qq聊天背景，图像不会随着页面滚动而改变。attachment附件，fixed固定的。
body {
background-image: url(“/i/photo/tree.png”);
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
}
5.css 边框
1.边框属性
border-width、border-style 以及 border-color 。
p {border: 5px solid red;}
2.圆角
radius半径
p {border: 2px solid red; border-radius: 5px;}
6.css 外边距和内边距
可以分开写：margin-top、margin-bottom、margin-right、margin-left。
缩写在一起的话是’上右下左’,就像钟表一样。
margin: 25px 50px 75px 100px;
下面的是将左右合并了。
margin: 25px 50px 75px;
auto自动将标签在其容器中水平居中。原理：该标签将占据指定的宽度，剩余空间将在左右外边距之间平均分配。
margin: auto;
可以继承父元素的值：margin-left: inherit;
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
<div><p class="ex1">本段落继承了 div 元素的左外边距。</p></div>
然后就是外边距是没有碰撞体积的，两个标签’之间’的边距如果都有设置，按照边距大的算，边距=max(标签1边距，标签2边距)。
内边距padding和外边距差不多，不过内边距不设置box-sizing: border-box; 那么标签实际宽度=width+padding*2,高同理。width是盒子内容区的宽度，如果需要加上边框和内边距值，那么盒子会变大，但内容区没有。box-sizing里content-box是默认值，border-box告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。
7.css 高度和宽度
单位有，px(像素)、百分比、vh（高）、vw（宽）。
vh是根据浏览器视口的高度变化; vw则是根据浏览器视口的宽度变化, 视口就是浏览器的可视区域。
最大或最小宽度（高同理）：max-width、min-width，最大宽度的意思就是可以小（自动调节），但最大这么多。
