web学习笔记—css(1)
1.css初识
互联网前三层：
- html:从语义的角度描述页面的内容
- css：从审美的角度描述页面的样式
- js：从交互的角度描述页面的行为（动态交互效果）
举个例子，女娲捏人：
人的器官有哪些->眼睛、皮肤等样式->动起来
架构->样式->动态效果
html->css->js
- css：cascading style sheet 层叠样式表（上一层的会把底下一层覆盖掉）
2.在html里面引入css的几种方式
2.1外部引入式
先新建一个css文件，编写
@charset "UTF-8";
/*UTF-8一定要大写*/
div{
width: 100px;
height: 100px;
color: beige;
background-color: aquamarine;
}然后将写好的css文件导入到html文件中
注意：一定要在head中引入，输入link，再按tab键
<head>
<!--引入css一定要在head里面引入-->
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../../css/demo1_style.css">2.2文档内嵌式
直接在html文档中写
在head中用style
<head>
<!--引入css一定要在head里面引入-->
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
font-size: 90px;
background-color: lightcoral;
}
</style>
</head>
层叠样式表：
代码第二段的效果会覆盖代码第一段的效果
有优先级
<style>
div{
font-size: 90px;
background-color: lightcoral;
}
</style>
<link rel="stylesheet" href="../../css/demo1_style.css">
2.3行内式（元素内嵌式）
<div style="color: green">
我是一个盒子
</div>
2.4三种方式的比较
层次性最高的：2.3行内式，直接在body中写
第1种方式，2个文件会影响页面加载时间
页面代码不多时，采用第2种
页面代码很多时，采用第1种
当完成全部，需要做小部分修改时，用第3种
3.常用样式
<style>
/*文字部分的样式*/
p {
/*文字大小*/
font-size: 100px;
/*文字颜色*/
color: transparent;
/*背景颜色*/
/*rgba:a表示透明度*/
background-color: rgba(133,200,145,1);
/*文字加粗，也可用数值表示，100-900，正常是400*/
font-weight:900;
/*文字倾斜*/
font-style: italic;
/*字体*/
font-family:新宋体;
/*下划线*/
text-decoration: underline;
/*文字阴影*/
/*参数分别代表：x轴（左右），y轴（上下），阴影的模糊程度*/
text-shadow: 20px 20px 3px black;
/*文字描边*/
-webkit-text-stroke: 2px red ;
}
</style>4.选择器
4.1标签选择器
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style>
/*标签选择器：只可以描述共性，不可以个性*/
p{
color: lightcoral;
}
</style>
</head>
<body>
<div>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
</div>
<div>
<p>我是段落4</p>
<p>我是段落5</p>
<p>我是段落6</p>
</div>
</body>4.2 id选择器
用Id
特点：
1）id在页面里面不可以重名，如果重名的话，显示的是相同的
2）可以给页面里面的任一元素命名
3）对应的选择符号是#
#p1{
...
}命名方式 要求：
1）必须以字母开头，不能够以数字开头（以数字开头没用，没效果）
2）不能和标签重名，id=p 错误
3）命名要有意义
4）一定是英文
5）只能有字母、数字、下划线，中间不要加空格
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style>
/*标签选择器：只可以描述共性，不可以个性*/
p{
color: lightcoral;
}
#p3{
color: aquamarine;
background-color: lightgreen;
}
</style>
</head>
<body>
<div>
<p>我是段落1</p>
<p>我是段落2</p>
<p id="p3">我是段落3</p>
</div>
<div>
<p>我是段落4</p>
<p>我是段落5</p>
<p id="p3">我是段落6</p>
</div>
</body>4.3 类选择器
一个Id一个id的写样式过于麻烦->类选择器
特点：
1）类名可以重复
2）可以给页面上面任意标签命名
3）选择符是点（.）
4）标签可以同时属于多个类
5）类名的顺序class=”c2 c1”跟样式无关，依然取决于head中的代码先后顺序（根据样式存在的位置顺序）
.c1{
...
}<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style>
/*标签选择器：只可以描述共性，不可以个性*/
p{
color: lightcoral;
}
#p3{
color: aquamarine;
background-color: lightgreen;
}
.c2 {
text-decoration: underline;
font-size: 10px;
}
.c1{
font-size: 100px;
}
</style>
</head>
<body>
<div>
<p>我是段落1</p>
<p class="c1 c2" >我是段落2</p>
<p id="p3">我是段落3</p>
</div>
<div>
<p class="c1">我是段落4</p>
<p>我是段落5</p>
<p id="1">我是段落6</p>
</div>
</body>4.4 id和类的选择
什么时候用类，什么时候用Id
类上样式(css)
id上行为(js)
4.5 基础选择器的层级关系
权重关系
id选择器>类选择器>标签名>通配符
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
color: orange;
}
.c1{
color: green;
}
p{
color: red;
}
*{
/*body是贯穿整个页面的*/
/*background-color: red;*/
color: purple;
}
</style>
</head>
<body>
<p class="c1" id = i1>段落1</p>
<p>段落2</p>
<p class="c1">段落3</p>
<p>段落4</p>
<p>段落5</p>
</body>4.6 后代选择器
1）后代描述的是一种共性，一种平衡
2）当要把某个元素下面的所有后代元素添加样式的时候，可以用后代选择器
3）后代选择器中间有空格
.c1 p{
color: red;
}
/*假设.c1权重为10,p权重为1,则它的权重为11*/
.c1 {
color: red;
}
/*它的权重为10*/.
4.7 交集选择器
特点：
1）选择的是 有个h1标签，起了一个title1的别名，描述的一种元素，不存在任何层级关系
2）交集选择器中间没有空格
h1.title1{
text-decoration: underline;
}4.8 并集选择器
多个标签共享一个样式
用逗号
特点：
1）并集选择器 选择两者或两者以上的元素
2）写法上 中间用逗号
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**{*/
/*color: lightblue;*/
/*background-color: yellow;*/
/*font-size: 30px;*/
/*}*/
/*多个标签共享一个样式*/
li,p,span{
color: lightblue;
background-color: yellow;
font-size: 30px;
}
</style>
</head>
<body>
<ul>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
</ul>
<p>我是段落</p>
<span>我是范围</span>
</body>