Web前端-CSS篇

学习CSS之后,感觉对Web前端又有了更深一步的理解。学习总结了许久,总算把学习笔记写完了,顿觉一阵轻松!!学习过程中,虽然有些枯燥,但最终的收获却很多很多。下面便是我的CSS的学习笔记,自我认为还行~~

一、CSS定义和三种用法

1、CSS:层叠样式表

负责页面内容的样式

标签的属性产生的问题:

  1. 浏览器麻烦,需要改很多
  2. 对开发人员:复杂,难维护

解决方法:

  1. 通过标签选择器,样式属性选择标签

  2. 可复用

    html放标签

    css放样式

2、CSS三种用法:

第一种用法:内联样式

在这里插入图片描述
在这里插入图片描述

第二种用法:内部样式

在这里插入图片描述
在这里插入图片描述

第三种用法:外部样式

在这里插入图片描述
在这里插入图片描述

二、CSS语法

1、选择器与内容

/* div:选择器 {}内容:声明 */    /*注释*/
div {                
        color: yellow;
        width: 200px;
        height: 200;
        background: green;
    }

2、颜色

1.rgb色彩模式

R 红色 浅深 0255

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.十六进制

09 AB

R 红色 浅深 0255 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

一起努力进阶吧!!!!


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 qwzf1024@qq.com

×

喜欢就点赞,疼爱就打赏