Web前端-CSS篇
学习CSS之后，感觉对Web前端又有了更深一步的理解。学习总结了许久，总算把学习笔记写完了，顿觉一阵轻松！！学习过程中，虽然有些枯燥，但最终的收获却很多很多。下面便是我的CSS的学习笔记，自我认为还行~~
一、CSS定义和三种用法
1、CSS:层叠样式表
负责页面内容的样式
标签的属性产生的问题：
- 浏览器麻烦，需要改很多
- 对开发人员：复杂，难维护
解决方法：
-
通过标签选择器，样式属性选择标签
-
可复用
html放标签
css放样式
2、CSS三种用法：
第一种用法：内联样式
第二种用法：内部样式
第三种用法：外部样式
二、CSS语法
1、选择器与内容
/* div:选择器 {}内容：声明 */ /*注释*/
div {
color: yellow;
width: 200px;
height: 200;
background: green;
}
2、颜色
1.rgb色彩模式
R 红色 浅~深 0~255
G 绿色
b 蓝色
用法一：
div {
color: rgb(240,0,0);
}
用法二：
div {
color: rgb(100%,20%,0%);
}
2.名称
red yellow blue red…
div {
color: rgb(100%,20%,0%);
}
3.十六进制
0~9 A~B
R 红色 浅~深 0~255 225写成ff (ff即15*15) #ff0000可以简写成**#f00**
G 绿色
b 蓝色
div {
color: #ff0000;
color: #f00;
}
三、CSS选择器
大括号{}前的，如：div{} 选择器是div
作用：通过选择器找到对应的html的元素，并把选择器的样式传给元素
选择器的分类：
基本选择器、组合选择器、属性选择器、伪元素选择器
1、基本选择器
1、通配符选择器
*{
border: 1px solid blue /*给所有元素加个外边框*/
}
2、标签div选择器
div{
border: 1px solid blue /*给div标签加个外边框*/
}
3、id选择器
html中：<div id="txt">ppp</div>
#txt{ /*#txt，*省略/
font-size: 50px; /*font-size字体大小*/
}
id具有唯一性
4、class类型选择器
html中：<div class="txt txt1">ppp</div>
.txt{
font-size: 50px;
}
.txt1{ /* div.txt1{color: #ff0000;} 作用于div标签下的class="txt1"
color: #ff0000;
}
class不具有唯一性 比较常用
2、组合选择器
把基本选择器 通过特殊符号串在一起
分组选择器
<div>div1</div>
<p>p1</p>
div,p{
background: green;
color: red;
}
p{ /*相当于background: green; color: red;*/
font-size: 60px;
}
嵌套选择器
空格隔开,嵌套在div里面的p才能生效
div p{
background: green;
color: red;
font-size: 60px;
}
子选择器
1.父标签必须是div才能生效
div>p{
background: green;
color: red;
font-size: 60px;
}
2.相邻的 同级别的选择器
<p></p>
div+p{
background: green;
color: red;
font-size: 60px;
}
3、属性选择器
基本s[属性]
<p title="txt">p1</p>
p[title=txt]{ /*p标签有title属性且值相同的才能生效*/
background: green;
color: red;
font-size: 60px
}
p[title~=txt]{ /*p标签有title属性且值有txt的(且其它字符在html里与txt以空格隔开)才能生效*/
background: green;
color: red;
font-size: 60px
}
p[title^=txt]{ /*p标签有title属性且值以txt开始的才能生效*/
background: green;
color: red;
font-size: 60px
}
<p title="txt yy">p1</p>
p[title$=yy]{ /*p标签有title属性且值以yy结束的才能生效*/
background: green;
color: red;
font-size: 60px
}
4、伪元素选择器
伪元素：自动加的、看不到的元素 如：开始before 结束after
<p title="txt">
<!--<before>-->
p1
<!--<after>-->
</p>
p::before{
content:"before"; /*content修改内容*/
font-size: 20px;
}
p::after{
content:"after"; /*content修改内容*/
font-size: 120px;
}
p {
background: green;
color: red;
font-size: 60px
}
块元素
第一个字母：first-letter
第一行：first-line
伪类 选择器
根据状态来改变
四、CSS原理
原则
-
优先原则：后解析的覆盖先解析的内容
-
继承原则：嵌套里面标签拥有外部标签某些样式 子元素可以继承父元素的属性
1.与文字有关的文本、样式可以被继承
2.块级元素，宽度不被设置的 继承父元素的宽 高由内容决定
-
优先原则：同一个选择器，从上往下执行
同一类型选择器，从上往下执行
不同类型的选择器，先解析低优先级的，再解析高优先级的 *<div<class<id
-
外部样式和内部样式: 外部样式和内部样式合并之后 一起解析
先外部样式后内部样式
-
内联样式: 外部和内部样式解析完后，才解析内联样式
-
加了important字段的最后执行:
div{ background-color: red!important; /*可以测试用*/ }
五、背景
body {
background-color: red；/*颜色*/
background-image: url('图片地址')/*图片复制平铺完整个页面*/
background-repeat: repeat-x;/*沿着x轴平铺/
background-repeat: no-repeat;/*不平铺，就一张图片*/
background-position: 100px 100px;/*50% 0%;*//*x轴 y轴*//*图片移动*/
/*x:left center(50%) right y:top(0%) center(50%) bottom*/
background-attachment: fixed/*固定背景*/
/*可简写成background: color image repeat attachment;*/
background: red url('图片地址') repeat-x fixed;
}
六、文本
/*字符间距*/
letter-spacing: 0px;
/*空格的距离*/
word-spacing:0px;
direction: ltr; /*left to right文本从左到右排列*/
text-decoration: none;/*默认*/
text-decoration: line-through;/*一条线中间穿过*/
text-decoration: overline;/*一条线上方穿过*/
text-decoration: underline;/*一条线下方穿过*/
/*对齐方式*/
text-align: center(居中) left(左) right(右) justify(两端)
可以加个宽高和颜色等width:200px;height:200px;
/*缩进*/
text-indent: 50px;
/*英文字母大小写*/
text-transform: uppercase lowercase capitalize(首字母大写)
/*取消换行*/
white-space: nowrap;
/*隐藏部分文本内容*/
overflow: hidden;
/*加省略号*/
text-overflow: ellipsis;
/*图片和文字的搭配*/
img{
weight:200px;
/*垂直对齐 top center bottom*/
vertical-align: top;/*文字排在顶端*/
float:left;/*文字围绕图片排列*/
}
七、链接和列表
1、链接
a{
color: green;
}
伪类
a:link{ /*初始状态*/
color: blue;
}
a:visited{ /*被访问*/
color: green;
}
a:hover{ /*鼠标移动*/
color: yellow;
font-size: 80px;
}
a:active{ /*点击*/
color: red;
}
2、列表
ul{
list-style-type: disc;/*实心圆*/
}
ul前面样式
none: 不使用项目符号
disc: 实心圆
circle: 空心圆
square: 实心方块
ol前面样式
demical: 阿拉伯数字
lower-alpha: 小写英文字母
upper-alpha: 大写英文字母
lower-roman: 小写罗马数字
upper-roman: 大写罗马数字
列表加图片logo样式
li{
background-image: url('图片路径');
background-repeat: no-repeat;/*消去平铺*/
height: 50px;
padding: 25px 50px 0;/*盒子模型调整图片位置*/
}
八、盒子模型
所有的元素可以看成矩形的盒子
内容 内边距 盒子框 外边距
<div class="box1">div1</div>
<div class="box2">div2</div>
.box1{/*盒子框*/
border: 5px solid blue;
/*内边距 上下 左右*/
padding: 10px 10px;
/*上 左右 下*/
padding: 10px 20px 10px;
/*上 右 下 左*/
padding: 10px 20px 10px 20px;
可写成：
padding-top:
padding-bottom:
padding-left:
padding-right:
/* background-color: green;*/
/*外边距*/
margin: 20px;/*和内边距相似*/
}
.box2{
border: 5px solid black;
}
九、布局
标准流：从上往下排列
浮动：float
float: left right;
clear: both;/*调整后，在下个div容器清除浮动，回到标准流状态*/
/*伪元素*/清浮动
.container::after{
content: "";
display: block;
clear: both;
}
/*伪元素 清理浮动和margin*/
.container::before{
content: "";
display: table;
}
.container::after{
clear: both;
}
十、定位
div{
width: 200px;
height: 300px;
background: blue;
/*定位 固定定位*/
position: fixed;
bottom: 100px;
right: 50px;
}
.div1{/*相对定位*/
position: relative;
top: 50px;
left: 100px;
}
/*绝对定位 不跟父元素(如:.container)一起移动*/
.div1{
position: absolute;
top: 50px;
left: 100px;
}
上面便是我对Web前端CSS部分的学习，学习总会有收获，No pain No gain! 小白进阶ing
一起努力进阶吧！！！！
扫一扫
297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
