前端Summary——CSS学习

最新推荐文章于 2023-05-31 14:50:29 发布

ZoJane

最新推荐文章于 2023-05-31 14:50:29 发布

阅读量514

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_35706707/article/details/109606673

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

（1）.CSS基础

一．CSS基础语法

1.形式

1.selector{

property:value

}

selector是属性选择器，下面是对应的属性和属性值

例：h1{color:red;font-size:14px}

属性大于一个之后，属性之间用分号隔开，如果值大于1个单词，则需要加上引号：

例：p{font-family:"sans serif";}

注：引入外部css <link href="MyCss.css" type="text/css" rel="stylesheet">

二．CSS基础语法

1.选择器的分组：

h1,h2,h3,h4,h5{color:red;}//可以给多个元素加入同一个样式

2.继承

body{

color:green;

}

body中的样式不能覆盖已经被定义好的样式。

三．CSS 派生选择器

1.派生选择器

通过依据元素在其位置的上下文关系来定义样式,用空格分隔。

Index.html中：

<li><strong>li标签hello css </strong></li>

Css中：

li strong{

color: brown;

}

会去li标签中的strong更改样式

四．id 派生选择器

1.id选择器

可以为标有id的HTML元素指定特定的样式

id选择器以“#”来定义

2.id选择器和派生选择器：

目前比较常用的方式是id选择器常常用于建立派生选择器

index.html文件内容：

<body>

<p id="pid">hello css <a href="###">我爱你没道理</a></p>

</body>

MyCss文件内容：

#pid a{

color: cornflowerblue;

}

五．类选择器

1.类选择器

1.类选择器以一个点来显示.，而id选择器以#显示

2.class也可以作派生选择器

index.html文件内容：

<body>

<p class="pclass">我爱你没道理<a href="$$">嘤嘤嘤</a></p>

小莹最美<p>天生丽质难自弃</p>

</div>

</body>

MyCss文件内容：

.pclass a{

color: #ff182f;

}

.divclass p{

color: #ff1def;

}

六．属性选择器

1.属性选择器

1.对带有指定属性的HTML元素设置样式，利用[ ]和[ = ]

2.属性和值选择器

index.html文件内容：

<!DOCTYPE html>

<head>

<style>

[title]{

color:blue;

}

[title=te]{

color:red;

}

</style>

</head>

<body>

<p title="te">人比黄花瘦</p>

</body>

</html>

结果：

（2）CSS样式

一．背景

CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果

1. background-color之demo

index.html文件内容：

<head>

<title>Title</title>

</head>

<body>

<p>测试一下背景师是否可以被继承</p>

</body>

style.css文件内容：

body{

background-color: darkorchid;

}

width: 120px;

padding: 10px;/*内边距*/

background-color: aqua;

}

效果：

2. background-image之demo（设置背景图片重要）

index.html文件内容同上
style.css文件内容：

/*body{

}*/

/*可以单纯的给某一标签加上背景图片*/

width: 200px;

}

结果：

3. background-repeat

Css内容：

body{

background-repeat: no-repeat;/*不允许重复*/

}

4. background-position

Css内容：

body{

background-repeat: no-repeat;/*不允许重复*/

background-position: right ;/*图片跑到了右边，实际上是表示right和center*/

}

可以看到图片只看到下半，用right top可以看到全部

5. background-attachment

Index.html内容：

<body>

<p>测试一下背景师是否可以被继承</p>

<p>测试一下背景师是否可以被继承</p>

</body>

style.css文件内容：

body{

background-repeat: no-repeat;/*不允许重复*/

background-attachment: fixed;/*将图片固定在背景中，不遂滑轮滚动而动，默认是随动而动*/

}

二．文本

CSS文本属性可定义文本外观，改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进。

Color\align\indent\tranform常用

1.color&text_align（颜色和文本对齐）

index.html文件内容:

<body>

<p>小莹是我心中的天使</p>

</body>

Css文件：

body{

color:red;

text-align: right;

}

background-color: aquamarine;

}

结果：

2.text_indent（首行缩进）

index.html文件内容

<body>

<div>

<p>爱小莹得永生！</p>

</div>

</body>

style.css文件内容：

h4{

text-indent: 2em;/*首行缩进两个字符 1em=16px;*/

}

结果：

3.text_transform（大小写格式）

index.html文件内容:

<body>

<p id="p1">this is My favourite girl</p>

<p id="p2">this is my Favourite girl</p>

<p id="p3">this Is my favourite girl</p>

</body>

style.css文件内容：

#p1{

text-transform:capitalize;/*首字母大写*/

}

#p2{

text-transform:uppercase;/*全部大写*/

}

#p3{

text-transform:lowercase;/*全部小写*/

}

结果：

4.CSS3文本效果：
text-shadow：祥文本添加阴影，属性值 5px(距左) 5px（距上） 5px（清晰度）#FF0000（背景色）
word-wrap:规定文本的换行规则，属性：normal

三．字体

CSS字体属性定义文本的字体序列、大小、加粗、风格和变形

四．链接

CSS链接的四种状态：

a:link 普通的，未被访问的链接
a:visited 用户已经访问的链接
a:hover 鼠标指针位于链接的上方
a:active 链接被点击的时刻
text-decoration：去掉链接名称下面的下划线：text-decoration:none

css内容：

a:link{

color: black;

text-decoration：none

}

a:hover{

color:blue;

}

a:active{

color: blue;

}

a:visited{

color:green;

}

五．列表

CSS列表属性允许你放置、改变列表标志，或者将图像作为列表项标志

index.html文件内容：

<body>

<ul>

</ul>

</body>

style.css内容：

ul li{

list-style-image:url("psb.jpg") ;

}

六．表格

index.heml文件内容：

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

Css文件内容：

#tb,th,tr,td{

border:1px solid blue;/*设置外边框颜色*/

text-align: center/*文字居中*/;

background-color: aqua;

}

/*折叠边框*/

#tb{

width:400px;

height: 400px;

border-collapse: collapse;/*折叠边框，两条线合成一条*/

}

结果：

七．轮廓

index.html文件内容：

Css内容：

outline-style: dotted;/*虚线，double双实线*/

outline-color: green;

outline-width: 1px;

}

结果：

（3）CSS定位

一．定位

1.定位：CSS定位是改变元素在页面上的位置
2.CSS定位机制：
普通流：元素按照其在HTML中的位置顺序决定排布的过程
浮动：
绝对布局：
3.CSS定位属性：

CSS position属性：

static
relative
absolute
fixed

二．浮动

Index.html:

<body>

</div>

</body>

Css内容：

#fd{

width:100px;

height:150px;

background-color: green;

float: left;

}

#sd{

width:150px;

height:100px;

background-color: red;

float: left;

}

#td{

width:100px;

height:150px;

background-color: blue;

float: left;

}

#container{

width:300px;

height:500px;

background-color: darkgray;

}

效果：

（4）CSS盒子模型

1.margin：外边距
2.border：边框
3.padding：内边距
4.content：内容

一．内边距

二．边框

可以创建效果出色的边框，并可以应用与任何元素

边框的样式：border-style：定义了10个不同的非继承样式，包括none

1.边框的单边样式：

border-top-style

border-left-style

border-right-style

border-bottom-style

2.边框宽度

border-width

3.单边框宽度:

border-top-width

4.边框颜色：

border-color

5.单边框颜色

border-top-color

CSS3边框：

border-radius:圆角边框

box-shadow：边框阴影

border-image:边框图片

三．外边距

1.css外边距：围绕在内容边框的区域就是外边距，外边距默认是透明区域
外边距接收任何长度单位、百分数值
2.外边距常用属性

3.内外边距合并：与大的边距相同

四．盒子模型应用

index.html 内容：

<!DOCTYPE html>

<head>

<title>盒子模型应用</title>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

style.css内容：

background-color: green;

}

.body_image{

width:100%;

height:400px;

background-color: aqua;

}

.body_content{

width: 100%;

height:1100px;

background-color: darkorchid;

}

.body_no{

width: 100%;

height:50px;

background-color: darkkhaki;

}

.footing{

width:100%;

height:400px;

background-color: brown;

margin:0px auto;

}

.footing_content{

width:100%;

height:350px;

background-color: chocolate;

}

.subnav{

width:100%;

height: 50px;

background-color: darkorchid;

}

（5）CSS常用操作

一．对齐

1.使用margin属性进行水平对齐

margin：0px auto;<--上下0，左右自适应，这是居中对齐-->

2.使用position属性进行左右对齐

position:right

3.使用float属性进行左右对齐

float:left

二．分类

三．导航栏

1. 垂直导航栏

导航栏都是列表形式存在

index.html文件内容：

<body>

<ul>

</ul>

css文件内容：

ul{

list-style-type: none;/*去掉列表项的点*/

margin :0px;

padding: 0px;

}

a:link,a:visited{

text-decoration: none;/*去掉下划线*/

display: block;/*块元素*/

background-color: chocolate;

color: blue;

width: 50px;

text-align: center;/*文字居中*/

}

a:active,a:hover{

background-color: aqua;

}

结果：

这种是垂直列表
变成水平列表项

2. 水平导航栏

ul{

list-style-type: none;/*去掉列表项的点*/

margin :0px;

padding: 0px;

}

a:link,a:visited{

text-decoration: none;/*去掉下划线*/

background-color: chocolate;

color: blue;

width: 50px;

text-align: center;/*文字居中*/

}

a:active,a:hover{

background-color: aqua;

}

li{

display: inline;/*一行来摆放*/

padding:3px;

padding-lefr: 5px;

padding-right: 5px;

}

四．图片

（5）CSS3选择器

一．元素选择器

二．选择器分组

h1,h2{}同时渲染h1h2

三．类选择器

.class{ }

a.class{ } 结合元素选择器

四．id选择器

#id{ }

五．属性选择器

<p title=””>hello</p>

[title]{ }

[href=”http://www.baidu.com”]{ }

六．后代选择器

li a strong{ }

可以选择孙子元素li strong{ }

（6）CSS3动画

一．2D3D转换

1.通过2D、3D转换，我们能够对元素进行移动、缩放、转动、拉伸或拉长，转换时元素改变形状、尺寸和位置的一种效果，可以使用2D、3D来转换元素
2.2D转换方法：

tranlate()平移
ratate()旋转
scale() 缩放
skew() 倾斜

index.html:

<!DOCTYPE html>

<head>

</head>

<body>

<div>这是一个初始效果</div>

<div class="div2">改变后的效果</div>

</body>

</html>

Css内容：

div{

width:100px;

height: 100px;

background-color: antiquewhite;

}

/*.div2{

transform:translate(200px,100px);!*通过transform来引入*!

-webkit-transform: translate(200px,100px);/*safari chrome支持*/

-ms-transform: translate(200px,100px);!*IE*!

-o-transform: translate(200px,100px);!*opera*!

-moz-transform: translate(200px,100px);!*firefox*!

}

.div2{

transform:rotate(180deg);!*通过transform来引入顺时针旋转180°*!

-webkit-transform: rotate(180deg); /*safari chrome支持*/

-ms-transform: rotate(180deg);!*IE*!

-o-transform: rotate(180deg);!*opera*!

-moz-transform: rotate(180deg);!*firefox*!

}

.div2{

transform:scale(1,2);!*通过transform来引入缩放第一个参数是宽的的倍数，第二个参数是高度的倍数*!

-webkit-transform:scale(1,2); /*safari chrome支持*/

-ms-transform: scale(1,2);!*IE*!

-o-transform: scale(1,2);!*opera*!

-moz-transform: scale(1,2);!*firefox*!

}*/

.div2{

transform:skew(50deg,50deg);/*通过transform来引入第一个参数是向x轴倾斜50°，，第一个参数是向y轴倾斜50°*/

-webkit-transform:skew(50deg,50deg); /*safari chrome支持*/

-ms-transform: skew(50deg,50deg);/*IE*/

-o-transform: skew(50deg,50deg);/*opera*/

-moz-transform: skew(50deg,50deg);/*firefox*/

}

二．过渡

1.通过使用CSS3，可以给元素增加一些效果；
2.CSS3过渡是元素从一种样式转换成另一种样式

动画效果的CSS
动画执行的时间

3.属性：

index.html文件内容：

<!DOCTYPE html>

<head>

</head>

<body>

<div>这是一个初始效果</div>

</body>

</html>

style.css文件内容：

div{

width: 100px;

height: 100px;

background-color: aqua;

-webkit-transition : width 2s,height 2s, -webkit-transform 2s;

transition-delay: 2s;

}

div:hover{

width: 200px;

height: 200px;

transform: rotate(360deg);

}

三．动画

demo：
index.html文件内容：

<div>这是一个初始效果</div>

style.css文件内容：

margin: 0px;

}

div{

width: 100px;

height: 100px;

background-color: aqua;

animation: anim 5s infinite alternate;/*无限循环*/

-webkit-animation: anim 5s infinite alternate;

}

@keyframes anim {

0%{background-color: aqua;left: 0px;top:0px}

25%{background-color: brown;left: 200px;top:0px;}

50%{background-color: chartreuse;left: 200px;top:200px;}

75%{background-color: darkgoldenrod;left:0px;top:200px;}

100%{background-color: darkmagenta;left: 0px;top:0px;}

}

@-webkit-keyframes anim {

0%{background-color: aqua;left: 0px;top:0px}

25%{background-color: brown;left: 200px;top:0px;}

50%{background-color: chartreuse;left: 200px;top:200px;}

75%{background-color: darkgoldenrod;left:0px;top:200px;}

100%{background-color: darkmagenta;left: 0px;top:0px;}

}

四．多列

1.在CSS3中，可以创建多列来对文本或者区域进行布局
2.属性：

column-count:分列的数量
column-gap:分列的间隔
column-rule:分列间隔的线及颜色

index.html文件内容

呦呦切克闹,煎饼果子来一套，爱吃不爱吃也只有他了

</div>

style.css文件内容：

.div1{

column-count: 3;

-webkit-column-gap:30px ;

column-gap: 30px;

column-rule:5px outset #FF0000;

}

五．CSS瀑布流效果

style.css文件内容：

.container{

column-width: 250px;

-webkit-column-width: 250px;

column-gap: 5px;

-webkit-column-gap: 5px;

}

.container div{

width: 250px;

margin: 5px;

}

ZoJane

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前端Summary——CSS学习

（1）.CSS基础一．CSS基础语法1.形式1.selector{ property:value }selector是属性选择器，下面是对应的属性和属性值例：h1{color:red;font-size:14px}属性大于一个之后，属性之间用分号隔开，如果值大于1个单词，则需要加上引号：例：p{font-family:"sans serif";}注：引入外部css <link href="MyCss.c...
复制链接

扫一扫

专栏目录