##css选择器
/* 标签选择器 */
h1{
color: black;
}
/* 通用选择器 */
*{
color:red;
}
/* class选择器 */
#first{
color: blue;
}
#second{
color: pink;
}
/* id选择器 */
.second{
color: yellow;
}
.orange{
color: #FF9933;
}
.black{
color: #6600CC;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/new_file.css"/>
</head>
<body>
<h1>水果列表</h1>
<ul>
<li class="orange">橙子</li>
<li class="orange">橘子</li>
<li class="black">葡萄</li>
<li class="black">黑布林</li>
</ul>
<h1>鲜花列表</h1>
<ul>
<li id="first">玫瑰</li>
<li id="second">桃花</li>
</ul>
</body>
</html>
效果展示
css:background
html{
height: 1000%;/* 画布大小 */
}
body{
/* background-color: #FF9933; 设置背景颜色*/
background-image: url("../img/u=2084274643,4119778192&fm=253&fmt=auto&app=138&f=JPEG.webp");
background-repeat: no-repeat;/* 不平铺 */
/* background-repeat: repeat-x;沿着x轴平铺 */
/* background-repeat: repeat-y; *//* 沿着y轴平铺 */
/* background-attachment:local; *//* 背景图相对于元素内容固定 */
background-attachment: scroll;/* 默认值,背景图相对于元素固定,背景随页面滚动而移动,即背景和内容绑定。 */
/* background-attachment: fixed; *//* 背景图相对于视口固定,所以随页面滚动背景不动,相当于背景被设置在了body上 */
background-position: 50px 50px;/* 想右平移50位像素,向下平移50位像素 */
}
文字字体
font-family: "宋体","楷体";/* 字体 */
font-style: italic;/* 斜体 */
font-size: 50px;/* 字体大小 */
font-weight: 300;/* 字体粗细 */
font-variant: small-caps;/* 小写转大写,并且以更小的字体 */