用 border-radius 添加圆角边框
border-radius 的属性值单位可以是 px(像素)
用 border-radius 制作圆形图片
除像素外,也可以使用百分比来指定 border-radius 的值
background-color 属性可以设置元素的背景颜色
如果想将一个元素的背景颜色改为 green,可以在 style 里面这样写:
.green-background {
background-color: green;
}
设定元素id
一个元素只有一个id
<h2 id="我是id">
使用 id 属性来设定元素的样式
选择 id 为 cat-photo-element 的元素,并设置它的背景颜色为绿色。 可以在 style 标签里这样写:
#cat-photo-element {
background-color: green;
}
id 不可以重复,它只能作用于一个元素上。 如果一个元素同时应用了 class 和 id,且两者设置的样式有冲突,会优先应用 id 中所设置的样式。
调整元素的内边距
每个 HTML 元素所占有的矩形空间由这三个重要的属性来控制:内边距 padding、外边距 margin 、边框 border。
padding 用来控制着元素内容与 border 之间的空隙大小
CSS 允许使用 padding-top、padding-right、padding-bottom、padding-left 属性来设置四个不同方向的 padding 值。
也可以一次性表达:
padding: 10px 20px 10px 20px;
调整元素的外边距
外边距 margin 用来控制元素的边框与其他元素之间的 border 距离。
如果你把元素的 margin 设置为负值,元素会变得占用更多空间。
CSS 允许使用 margin-top、margin-right、margin-bottom、margin-left 属性来设置四个不同方向的 margin 值。
也可以一次性表达:
margin: 10px 20px 10px 20px;
使用 [attr=value] 属性选择器
这个选择器使用特定的属性值来匹配和设置元素样式。 例如,下面的代码会改变所有 type 为 radio 的元素的外边距:
[type='radio'] {
margin: 20px 0px 20px 0px;
}
绝对单位与相对单位
单位长度的类型可以分成 2 种:相对和绝对
绝对单位与长度的物理单位相关。 例如,in 和 mm 分别代表着英寸和毫米。 绝对长度单位会接近屏幕上的实际测量值,不过不同屏幕的分辨率会存在差异,这就可能会造成误差。
相对单位长度,比如 em 和 rem,它们的实际值会依赖其他长度的值而决定。 比如 em 的大小基于元素字体的字体大小。 如果使用它来设置 font-size 值,它的值会跟随父元素的 font-size 值来改变。
给 HTML 的 body 元素添加样式
请将以下代码添加到 style 标签里面:
body {
background-color: black;
}
body 元素继承样式:
内联样式的格式:
<h1 style="color: green;">
important的格式:
粉红文本元素的颜色声明添加关键词 !important,以确保 h1 元素为粉红色。
.pink-text {
color: pink !important;
}
但是class选择器的优先级高于继承样式,且在 <style>
标签里面声明的 class 顺序十分重要,之后的声明会覆盖之前的声明。 第二个声明的优先级始终高于第一个声明。并且ID 选择器优先级高于 Class 选择器。内联样式的优先级高于 ID 选择器,但是Important 的优先级最高。
所以说优先级为:继承样式<Class 选择器<Class 选择器后一个声明<ID 选择器<内联样式<Important
使用十六进制编码获得指定颜色