css 叠层样式表 作用：网页外观
写css常用的三种方式：
1.行内样式。直接写在标签style里面 例：<div style="color:#F00; font-size:30px">你好</div>
2.内嵌式。在<head></head>标签里面写style样式
例：
<head>
<style type="text/css">
div{
color:red;
font-size:40px;
}
</style>
</head>
<body>
<div>你好</div>
</body>
3.链接式 直接新建一个css文件（最常用的方法，html，css，js分开写，不混写，写法在后面）
只需了解的第四种方式：导入样式
======================================================================================================================================
css的选择器
作用：通过选择器找到标签，然后更改标签样式
常用css选择器：
1.标签选择器 div{}
2.class选择器 给标签添加class属性设定c1 .c1{}（一个标签可以有多个class）
3.id选择器 给标签添加id属性设定d1 #d1{} (一个标签只有一个id)
选择器的优先级： id>class>标签
css权重：行内样式>内嵌式>链接式（遵循就近原则）
======================================================================================================================================
css引用方法：
<head>
<link href="css/demo.css" rel="stylesheet"/>
</head>
css写法：
div{}代表div标签的样式；
div p{}代表div里面的p标签的样式；
div .c1{}代表div里面class等于c1的样式；
div，p{}代表div和p标签的样式；
div，p，.c1{}代表div和p和class等于c1的样式；
.c1{}代表class等于c1的样式；
#d1{}代表id等于d1的样式。
======================================================================================================================================
和字体相关的css属性：
#d1{
color:red; 颜色
font-size:50px; 大小
font-family:"黑体";（默认宋体）
font-weight:30; 字体加粗
letter-spacing:10px;字间距
text-decoration:underline;下划线
text-transform:uppercase;全部大写（只针对英文字母）
}
css具有继承性，但只有字体相关的css属性才能被继承。
======================================================================================================================================
css应用：
如何让一个方框内的文字垂直居中显示
#d1{
width:100px;
height:100px;
border:solid;
border-color:#F00;
text-align:center;
line-height:100px;行高
}
如何用border画三角形
#d1{
height:0px;
width:0px;
border:solid;
border-color:red;
border-width:50px;
border-left-color:transparent;左边框颜色透明
border-right-color:transparent;右边框颜色透明
border-top-color:transparent;上边框颜色透明
}
======================================================================================================================================
背景相关属性：
#d1{
background-color:red;背景颜色
background-image:url("../image/1.jpg");背景图片
background-repeat:repeat-x;背景重复（横向铺满）
background-postion:10px 20px;背景方位（与容器水平方向和垂直防线的距离）
background-attachment:fixed;背景图片固定
}
扫一扫
976
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
