引入方式4
1.内部样式
<style>
div {
font-size: medium;
color: red;
}
</style>
<div>hello world</div>
2.外部样式
创建css文件
通过link标签引入
<link rel="stylesheet" href="style.css">
<div>hello world</div>
3.内联样式
<div style="color: brown; font-size: larger;">hello world</div>
css常见选择器
1.标签选择器
使用标签名,把页面中的同名标签都选中,但是难以对单个元素进行个性化定制
<style>
div {
color:red;
font-size: 100px1;
}
</style>
<div>hello world</div>
<div>How old are your?</div>
2.类选择器
css中创建一个类名,对应一组css属性,让指定的html元素应用这个类
<style>
.one {
color:red;
font-size: 100px1;
}
</style>
<div class="one">hello world</div>
<div>How old are your?</div>
3.id选择器
在css使用#开头代表id选择器
一个html标签可以有一个id属性,它的值作为标签的身份标识,
可以通过id选择器,获取指定元素,id是唯一的不能被多个标签使用
<style>
#ha {
color: aquamarine;
font-size: 100px;
}
</style>
<div id = 'ha'>hello world</div>
4后代选择器
在一个页面十分复杂的情况下,可以使用后代选择器,针对性修改某个元素的值
<ol>
<li>
<a href="#">hello</a>
</li>
</ol>
<style>
ol li a{
color: aquamarine;
font-size: 100px;
}
</style>
css常见属性
<style>
.one {
/* 字体大小 */
font-size: large;
/* 字体种类 */
font-family: '微软雅黑';
/* 字体形状 倾斜的*/
font-style: italic;
/* 字体宽度 */
font-weight: 400;
}
.two {
/* 文本颜色 */
color: black;
/* 文本对齐方式 */
text-align: center;
/* 文本装饰 */
text-decoration: underline;
/* 文本缩进 */
text-indent: 20px;
/* 行高 */
line-height: 100px;
}
</style>
<div class="one two">hello world</div>
color属性的多种写法
1.使用颜色单词
2.rgb() 中每个分量都是一个字节 (0 ~ 255)
3.使用六个16进制数 #ff0000 可以缩写成 #f00
背景设置
<style>
.one {
/* 导入图片 */
background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.2zd6VjunSEhgIOVfmMFXZAHaNK?pid=ImgDet&rs=1);
/* 禁止平铺 */
background-repeat: no-repeat;
/* 设置高度 */
height: 1500px;
/* 图片位置 居中*/
background-position: center;
/* 图片大小 尽可能覆盖*/
background-size: cover;
}
</style>
圆角矩形设置
/* 设置圆角矩形 表示宽度的一半,就变成一个圆形*/
border-radius: 50%;
