首页 前端知识 CSS3 系统化学习(1)

CSS3 系统化学习(1)

2024-08-15 23:08:33 前端知识 前端哥 569 471 我要收藏

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,最大宽度的意思就是可以小(自动调节),但最大这么多。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15762.html
标签
评论
发布的文章

HTML5学习记录

2024-04-29 12:04:01

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!