css学习

最新推荐文章于 2024-07-24 13:52:24 发布

Mr.rain245

最新推荐文章于 2024-07-24 13:52:24 发布

阅读量141

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/Rain__Mr/article/details/121303405

版权

Css学习

1.使用link将css样式加入HTML中

2.选择器

作用：选择页面上的某一个或者某一类元素

2.1基本选择器(不遵循就近原则，id选择器>class选择器>标签选择器)

标签选择器

标签{}

类选择器class

Id选择器

/**/

2.2层次选择器

后代选择器：在某个元素的后面所有

/*后代选择器*/
body p{
background: #5753ff;
}

子选择器：某个元素后面的一个元素

/*2.子选择器*/
body>p{
background: aquamarine;
}

相邻兄弟选择器：相邻的同级的并且是下一个元素

/*兄弟选择器*/
.active +p{
background: beige;
}

通用选择器：当前选中元素的向下的所有兄弟元素

.active~p{
background: red;
}

2.3结构伪类选择器

/**/
ul li:first-child{
background: red;
}

/*ul的最后一个元素*/
ul li:last-child{
background: blue;
}

/*只选中p1:定位到父类元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效

*/
p:nth-child(1){
background: red;
}

a:hover{
background: chartreuse;（鼠标指到文字变颜色）
}

2.4属性选择器（常用）

/*属性名，属性名 = 属性值（正则）
绝对等于
包含这个元素
以这个开头
以这个结尾
*/

/*存在id元素的*/
a[id]{
    background: red;
}
/*id-first的元素*/
a[id = first]{
    background: beige;
}
/*class中有links的元素*/
a[class*="links"]{
    background: #41ff5b;
}
/*选中href中以http开头的元素*/
a[href^=http]{
    background: blue;
}
/*选中href中以pdf结尾的元素*/
a[href$=pdf]{
        background: #19a5ff;
}

3.美化页面元素

Span标签：重点要突出的字，使用span标签套起来

3.1字体样式

font-size：字体的大小

Font-family:字体的样式

font-weight：字体粗细

Color：字体颜色

3.2文本样式

颜色

Color

Rgb

Rgba：a（透明度）

对齐方式

text-align：center（文本居中）

text-align：right（偏右）

text-align：left（偏左）

首行缩进

text-indent：2em（首行缩进2字符）

行高

line-height：300；

装饰

text-decoration：underline（下划线）

text-decoration：line-through（中划线）

text-decoration：overline（上划线）

Img，span{

vertical-align:middle

}（图片和文字水平对齐）

a标签默认会有下划线，去除下划线用（text-decoration:none）

hover{

Color：green；

}（鼠标悬浮的颜色）

active{

Color：green；

}（鼠标按住未释放的颜色）

visited{

Color：green；

}（点击过后的颜色，访问过的页面）

text-shadow：green（阴影的颜色）10px （水平偏移的像素位）10px（垂直偏移的像素位）10px（阴影半径）

3.6列表

ul li{

height:30px(每一列的行高)

List-style：none；（去除前面的圆点或数字）circle（空心圆）

}

3.7背景

背景颜色

背景图片

Div{

Width:1000px;

Height:700px;

Border:1px solid red;

Background-image:url(“”);（默认图片平铺在div内）

Background-repeat:repeat-x;（横向平铺）

Background-repeat:repeat-y;（竖直平铺）

Background-repeat:no-repeat;（仅有一张图片，不平铺）

}

Background:颜色图片图片位置平铺方式

Background-position:236px 2px（图片的位置）

3.8渐变

https://www.grabient.com/

盒子模型

Margin：外边距

Padding：内边距

Border：边框

4.2、边框

1.边框的粗细1px

2.边框的样式solid（实线）dashed（虚线）

3.边框的颜色red

4.3、内外边距

Margin：0 auto（上下为0，左右居中）

Margin：外边距

Padding：内边距

4.4、圆角边框

Border-radius

4.5阴影

Box-shadow

5、浮动：

标准文档流

块级元素：独占一行

h1~h6，p，div，列表

行内元素：不独占一行

Span，a，img，strong。。。。。

行内元素可以被包含在块级元素中，反之，则不可以

5.2、display：inline-block（将元素变为即使行内元素又是块元素）

Inline（行内元素）

Block（块级元素）

5.3、float

1、左右浮动 float

5.4、父级边框塌陷的问题

Clear：right；右侧不允许浮动

Clear：both；两侧都不允许有浮动

解决方法

增加父级元素的高度
增加一个空的div标签，清除浮动

.clear{

Clear:both;

Margin:0;

Padding:0;

}

Overflow

Overflow:hidden(隐藏超出div的部分)

Overflow:scroll（超出div的部分可以产生滚动条显示）

父类添加一个伪类：after（市面最认可的解决方式）

#father：after{

Content:’’;

Display:block;

Clear:both;

}

定位

6.1、相对定位（相对原来的位置进行位移）

Position:relative

Top:

Left:

Right:

Bottom:

6.2、绝对定位position：absolute

定位:没有父级元素定位的前提下，相对于浏览器定位

当把父级元素position：relayive时，以父级相对定位

6.3、固定定位position：fixed

固定在某个位置跟随浏览器移动

6.4、z-index（层级设置）最低层是0，最高无限制

可以设置某个元素叠加在第几层

Opacity（可以做背景透明度）

7、素材网站

模板之家

Mr.rain245

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习

Css学习1.使用link将css样式加入HTML中2.选择器作用：选择页面上的某一个或者某一类元素2.1基本选择器(不遵循就近原则，id选择器>class选择器>标签选择器)标签选择器标签{}类选择器classId选择器/*<!--id选择器：id保证全局唯一#
复制链接

扫一扫