<div style=‘color:red‘>alex</div>
内嵌式
在head标签中内部书写style <style> /*css代码*/ </style>
外接式
在head标签中内部书写style <link href=‘css/index.css‘ rel=‘stylesheet‘>
优先级：行内样式>内嵌样式和外接式，外接式和内嵌式的优先级是一样的但是需要看代码从上到下谁在后面就显示谁的，同一属性会覆盖，不同属性不会覆盖
#xxx
<style> .box{width:200px; height:200px; background-color:yellow; }.active{ border-radius: 200px; } #对active单独设置，border-radius边框是小圆角 </style> <div class=‘box active‘></div> <div class=‘box‘></div> <div class=‘box‘></div
.xxx
div{}
p{}
ul
ol
....
div p{color: red; }
div>p{color:red; }
div,p,body,html,ul,ol....{ padding: 0; margin: 0; }
input，textarea{border:none;outlin:0;}
div.active{ } 既作用在div也作用在active
对于a标签，如果想设置a标签的样式，要作用于a标签上，对于继承性来说，a标签不起作用的
“爱恨准则”
LoVe HAte
/*LoVe HAte*/
/*a标签没有被访问时候设置的属性*/
a:link{
/*color: red;*/
}
/*a标签被访问过后设置的属性*/
a:visited{
color:yellow;
}
/*a标签悬浮时设置的属性*/
a:hover{
color: deeppink;
}
/*a标签被摁住的时候设置的属性*/
a:active{
color: deepskyblue;
}
link、visited、active只能用在a标签上，hover可以用在任意标签上
input[type=‘text‘]{
background-color: red;
}
input[type=‘checkbox‘]{
}
input[type=‘submit‘]{
}
p::first-letter{ color: red; font-size: 20px; font-weight: bold; }--设置第一个文字 p::before{ content:‘@‘; @小猪佩奇 }--在p标签前面添加内容。content是添加的内容 /*解决浮动布局常用的一种方法*/ p::after{ /*通过伪元素添加的内容为行内元素*/ content:‘$‘; @小猪佩奇$ }--在p后面前面添加内容。content是添加的内容 <p>小猪佩奇</p>
为什么有继承性？
减少代码
前提是选中了标签
权重比较：
1.数选择器数量： 先数id 再类最后数标签，谁大它的优先级越高，如果一样大，后面的会覆盖掉前面的属性 （标签选择器的权重为1，类选择器的权重为10，id的选择器的权重为100，行内选择器的权重为1000）
2.选中的标签的属性优先级用于大于继承来的属性，它们是没有可比性
3.同是继承来的属性：谁描述的近，谁的优先级越高；描述的一样近，这个时候才回归到数选择器的数量
height 内容的高度
padding：内边距，border到内容的距离，可以调整内部元素的位置，可以设置上下左右的距离
border： 边框
<head> <style> #box{ width:200px; height:200px; background-color:red; padding:50px; /*一个值的时候表示四周都是 50边距*/ padding：0 10px; /*第一个元素表示上下，第二个值表示左右*/ padding：0 10px 30；/* 第一个元素表示上，第二个值表示左右，第三个值表示下*/ padding： 10 20 30 40px；/*上右下左，也可以设置单独方向*/ border：4px solid #000; margin-left:30px;/*往右移动30px*/ } </style> <div id=‘box‘ class=‘box‘></div> 302*302盒子 #box{ width:200px; height:200px; background-color:red; padding:50px; #四周都是50边距 border：1px solid #000; } #box{ width:260px; height:260px; background-color:red; padding:20px; #四周都是50边距 border：1px solid #000; }
<!--块级标签：1.独占一行 2.可以设置宽高，如果不设置宽，默认是父标签的100%宽度-->---(div,p) <!--行内标签：1.在一行内显示 2.不可以设置宽高，如果不设置宽高，默认是字体的大小>--- （a，span，） 行内块标签（input，img）： 1.在一行内显示 2.可以设置宽高 在网页中： 行内转块和行内块是非常实用 display: inline/ inline-block/ block ，display：显示方式，block 显示块；inline显示行内 行内标签包括行内标签行内块标签 display:bolck;行转块 text-align：center； 水平居中--文本排序方式 line-height：40px; 垂直居中--单行高等于盒子模型的高度时实现垂直居中 text-decoration： 文本修饰 none无修饰，underline下划线 line-throu删除 嵌套关系： 1.块级标签可以嵌套块级和行内以及行内块 2.行内标签尽量不要嵌套块级 3.p标签不要嵌套div，也不要嵌套p 可以嵌套a/img/表单控件
1.div和span标签在网页中的作用
div:将网站分割成独立的逻辑区域 division 分割
<style> span.active{ font-weight:bold; --加粗的 font—weight字体粗细 } </style> <p> <span class=‘active‘>央视网消息</span>（新闻联播）：中共中央总书记、国家主席28日上午在北京人民大会堂亲切会见出席第九届世界华侨华人社团联谊大会和中华海外联谊会五届一次理事大会的全体代表，
代表党中央、国务院向大家表示热烈欢迎和衷心祝贺，向世界各地华侨华人致以诚挚问候。 </p>
2.css基础选择器和高级选择器有哪些？
选择器的作用：选中标签
基础选择器
id选择器 特定属性的元素（标签） #
类选择器 class = ‘active‘ .active 类是可以重复，并且可以设置多个
高级选择器
后代 子子孙孙
子代 只包括儿子
组合 html,body,div,p,ul....
交集 span.active
3.盒子模型的属性有哪些？并说明属性的含义，画出盒子模型图
width:内容的宽度
height:内容的高度
border:边框
padding:内边距
margin: 外边距
4.如何让文本垂直和水平居中？
<style> div{ width:200px;宽 height: 60px;高 background-color: red; text-align:center; ---水平居中 line-height: 60px;--垂直居中 } </style> <div> wusir </div>
5.如何清除a标签的下划线？
text-decoration: none;
none;无线
underline:下划线
overline:上划线
line-through:删除线
6.如何重置网页样式？
html,body,p,ul,ol{
margin: 0;
padding: 0;
}
/*通配符选择器 */
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
input,textarea{
border: none;
outline: none;
}
7.如何清除input和textarea标签的默认边框和外线？
input,textarea{
border: none;
outline: none;
}
8.在css中哪些属性是可以继承下来的？
color,text-xxx,font-xxx,line-height,
letter-spacing, 中文属性 word-spacing英文属性
9.如何正确比较css中的权重？
css选择器优先级
元素选择器1
类选择器10
id选择器100
内联样式1000
如果选中了标签
数选择器的数量 ：id class 标签 谁大优先级越高 如果一样大，后面优先级越大
如果没有选中标签，当前属性是被继承下来，他们的权重为0，与选中的标签没有可比性
都是继承来的，谁描述的近，就显示谁的属性（就近（选中的标签越近）原则），如果描述的一样近，继续数选择器的数量。
!important 它设置当前属性的权重为无限大，大不过行内样式的优先级
10.块级标签和行内标签
1.可以设置高度，如果不设置宽度，默认是父标签的100%的宽度
2.独占一行
p
div
ul
ol
li
h1~h6
table
tr
form
1.不可以设置宽高
2.在一行内显示
a
span
b
strong
em
i
1.可以设置宽高
2.在一行内显示
display：inline/inline-block/block
input
img
原文：https://www.cnblogs.com/xu1296634150/p/12766426.html