CSS总结1（前端一）

最新推荐文章于 2024-10-13 08:49:06 发布

zyyyyyy24

最新推荐文章于 2024-10-13 08:49:06 发布

阅读量167

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/zyyyyyy24/article/details/107431813

版权

CSS为html,css,javaScript三部曲之一，它被称作为页面的皮肤。通常网页的编写是先用html写好骨架后再写css来给网页点缀

Day3

一.CSS样式选择

1.行内样式

<h1 style=”color:pink;”>xxx</h1>

Xxx的颜色就为粉色

2.内部样式

首先在网页编写中css部分可写到中间；

其次Css要创建并写入标签中即style表示为样式标签；

3.外部样式

Css可以不与html写入同一代码页中，可以写入另一新的代码页中(注意要将代码页以.css结尾)。而通常情况下由于代码较多所以一般css页面采用为外部样式。

引用外部css样式<link rel=”stylesheet” href=”css路径”>并写于head标签中

二．CSS选择器

1.类选择器

<div class=”xxx”></div>

则在style标签中用 .xxx 则可对应为相应的div的css代码（即一物对一物）

2.id选择器

用法同类选择器相似，只不过把 . 换为 #；把class换位id；

3.通配符标签

*{}表示可适用于所有标签

三．CSS样式

1.字体样式属性

大小:px(像素),size/height=100px;

字体样式:font-family=”宋体/黑体/微软雅黑……”

字体粗细:font-weight:bold/100-900

字风:font-style:italic（倾斜）/normal

2.字体样式综合写法

Font: (italic) (700) 20px family

字风粗细字号字样式

3.文本样式

文本对齐方式：text-align: center/left/right

行间距:line-height:xxxpx;

字行缩进:text-indent:xxxem;(1em就是1个字的大小)

文本装饰 text-decoration:none/underline/overline/blink

附录为Day3练习代码（css1):
在这里插入图片描述

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>腾讯体育-中超联赛</title>

<style>

p{

line-height: 30px;

text-indent: 2em;

font-size: 20px;

}

div{

font-size: 12px;

text-align: center;

}

.abc{

color:antiquewhite;

font-size:10px;

font-style:italic;

text-decoration: none;

}

.time{

color:#A9A9A9;

}

.tencent{

color:greenyellow;

font-style: normal;

font-size: 12px;

text-decoration: none;

}

.search{

color: aqua;

}

.comment{

color:darkmagenta;

}

.end{

color:orange;

}

.title{

text-align: center;

font-weight: 600;

font-size: 30px;

}

</style>

</head>



<body>

<h1 class="title">中超总决赛G1：河南建业主场迎战天津泰达</h1>

<div>

<span class="time">2021年5月3日14：33</span>

<a href="腾讯体育_腾讯网" class="tencent">腾讯体育</a>

<span class="comment">评论中大奖（已有1332人次参加）</span>

<span class="search">收藏本文</span>

<input type="text" value="请输入查询内容" class="end">

<input type="button" value="搜索" class="end">

</div>

<p>

<strong>中超联赛2020-2021赛季总决赛</strong>将于5月3日晚正式打响<a href="#" class="abc">[微博]</a>，此次杀进总决赛的两支队伍分别是河南建业队和天津泰达队。这两支队伍是两队历史上第一次在总决赛相遇，究竟谁能拿下第一场比赛，谁能在总决赛第一场抢占先机。建业？泰达？让我们于5月3日晚18点30锁定腾讯视频，一起来欣赏这两只球队的同场竞技，这场比赛也注定会碰撞出令人心潮澎湃的火花！让我们拭目以待！

</p>

<p>

河南建业队<a href="#" class="abc">[微博]</a>的主场位于河南省郑州市的建业体育场，建业队作为一支老牌强队有着丰富的大赛经验和及其有深度的阵容配置，从球员到教练组再到球队的管理层和各个工作人员，他们本赛季都拿出了饱满的热情为球队取得惊人战绩做出了不可忽视的贡献。

</p>

<p>

天津泰达队<a href="#" class="abc">[微博]</a>本赛季在常规赛上取得了联盟第二的成绩，仅次于广州恒大但又比建业多出2个胜场，他们球队的深度整体来看是不如河南建业的，但他们却有着四个超级球星压阵，前锋线2位，中场后后场个有一位，他们的个人实力是任何球队也不可小看的。

</p>

</body>

</html>

Day4:

一．标签特性

1.连接伪类选择器

a:link 未访问过的链接

:visited 已访问过的链接

hover 鼠标到连接上

active 鼠标点击未松手时

2.标签模式！（常为面试考题）

①块级元素：独占一行，默认宽度为容器的100%

<h1>--<h6>,<p>,<div>,<ul>,<ol>,<li>….

②行内元素：一行可以有多个行内元素，宽度默认为内容长度

<a>,<strong>,<b>,<span>…..

③行内块元素：相邻行内块元素之间有空白间隙，默认快读微软内容宽度，不过宽高边距均可设。

<img>,<input>,<td>

3.标签样式切换

display:inline(行内)/block(块级)/inline-block(行内块)

4.行高关系

line-height=height(即等号两边所赋予的px为同一值)à文字垂直居中

Ø 文字偏下（小于取反）

二．Css样式

1.css背景

背景颜色background-color: pink

背景图片 -image:url(路径)

背景图片平铺 -repeat:repeat(默认平铺)/no repeat(不平铺)/repeat-x(水平平铺)/repeat-y(竖直平铺)

背景图片位置： -position: xpx(x座标) xpx（y坐标） —àx坐标

也可以是:center top |

v y坐标

背景图片附着： -attachment:scroll(背景滚动)/fixed(背景固定)

2.背景简写

background: pink url(背景图片路径) no-repeat fixed center top;

颜色路径平铺否附着否位置

3.背景透明

Background:rgba(0,0,0,.3)!hhh可自己体会(注：0.3习惯写为.3)

三.CSS三大特性

层叠性：就近原则 ó样式冲突

继承性：子承父业

优先级：!important>style=””>id>类，伪类>标签选择器

附录为Day4练习代码（css2）：
在这里插入图片描述

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>www.Lakers players information</title>

<style>

.time{

text-align: center;

}

.time a{

display: inline-block;

width: 200px;

height: 100px;

line-height: 100px;

background: url("2.jpg") no-repeat center left;

text-decoration: none;

color:orange ;

}

.time a:hover{

color:peru;

}

</style>

</head>



<body>

<div class="time">

<a href="#">lebron</a>

<a href="#">kuzma</a>

<a href="#">davais</a>

<a href="#">huwood</a>

</div>

</body>

</html>