CSS3 系统化学习（1）

最新推荐文章于 2024-08-12 23:09:11 发布

白水465

最新推荐文章于 2024-08-12 23:09:11 发布

阅读量828

点赞数 5

文章标签： css3 学习 css 前端

本文链接：https://blog.csdn.net/qq_62527610/article/details/140835870

版权

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 内的。