本文已参与「新人创作礼」活动，一起开启掘金创作之路
css入门知识总结
1.简介
1.1 作用
设置HTML中的文本内容（字体，大小，颜色，对齐方式）、图片外观（宽高，边框样式，边距）以及版面布局和外观显示样式
1.2 价值
让HTML专注做结构呈现，样式交给css
2.引入方式
三种样式表
1.行内样式表 控制一个标签 结构样式混写 使用少
2.内部样式表 控制一个页面 内部的结构样式分离 使用多
3.外部样式表 控制多个页面 结构和样式完全分离 使用多
2.1 外部样式表
新建一个后缀名为css的样式表
通过link标签引入它
3.三大特性
层叠性
相同的选择器如果有设置相同的样式来渲染它 那么它只会选择一个样式来渲染 其他的样式都会被覆盖
<style>
div {
color: blue;
font-size: 30px;
}
div {
color: brown;
}
/* 此处div的颜色层叠冲突 采取的颜色是最近的brown颜色 但是字型还是会采取第一个里面的 */
</style>
继承性
子元素可以继承父元素的某些属性 但是width height padding margin 不能继承
除非添加inherit属性
优先级
同一个DOM元素被多个选择器指定时 就会产生优先级
选择器相同时 则根据层叠性来 后面的覆盖前面的
选择器不同时(标签选择器和id选择器可以指向同一个元素 但是id权重高于标签) 则选择权重最高的
复合选择器 选择权重叠加后 权重最高的
<style>
/* 权重的叠加问题主要争对于复合选择器 */
/* 标签选择器ul 的权重为0，0，0，1 并且li的权重也为0，0，0，1
故ul li的权重为0，0，0，1+1大于单独的li标签的权重
虽然权重可以叠加但是权重不能进位*/
ul li {
color: seagreen;
}
li {
color: red;
}
.nav li {
color: pink;
}
/* 同理这里是由类选择器和标签选择器组成的权重要大于 ul li的权重 */
</style>
</head>
<body>
<ul class="nav">
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
</body>
4.属性
4.1布局定位属性
display/position/float/clear/visbility/overflow
4.2自身属性
width/height/margin/padding/background
4.3文本属性
color/font/text-decoration/text-align等
4.4其他属性(css3)
content/cursor/border-radius/box-shadow/text-shadow
5.选择器的作用
选择标签
6.选择器的分类
基本选择器
标签选择器 div{}
id选择器 #div1{} 记得是#开头
类选择器 .div1{} 记得是.开头
通配符选择器 *{} 选择页面的所有元素
复合选择器
后代选择器 格式为：元素1 元素2 可以选择某元素里面所有的子元素
子元素选择器 格式为：元素1 > 元素2 只能选择某元素里面最近一级的子元素
<style>
.nav a { /* 这是后代选择器 可以改变nav里面包含的所有a标签里面的字的颜色*/
color: red;
}
.lic>a {/* 这是子选择器 只选择选择比lic第一级的a标签 */
color: red;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">hhhh</a>
<p>
<a href="#">哈哈哈</a>
</p>
</div>
<!-- div的儿子是第一个a标签 第二个a标签不算儿子 -->
<br>
<br>
<div class="lic">
<a href="#">hhhh</a>
<p>
<a href="#">哈哈哈</a>
</p>
</div>
</body>
并集选择器 选择多组标签 同时为它们定义相同的样式
伪类选择器：
1链接伪类选择器：
a:link //选择所有未被访问的链接
a:visited//选择所有已被访问的链接
a:hover//选择指针位于其上的链接
a:active//选择活动链接(即鼠标点击链接但未弹起时)
2:focus伪类选择器
选择表单获取焦点时的元素 可以设置表单获得焦点时的样式
<style>
input:focus {
background-color: pink;
}
</style>
</head>
<body>
<input type="text">
</body>
\
