CSS笔记

最新推荐文章于 2025-07-31 17:32:21 发布

不务正业的前端学徒

最新推荐文章于 2025-07-31 17:32:21 发布

阅读量104

点赞数

CC 4.0 BY-SA版权

文章标签： html

本文链接：https://blog.youkuaiyun.com/weixin_45522704/article/details/104592008

样式表

行内样式表：

<h1 style="color:pink; font-size:18px">style样式</h1>
<input type="text" value="请输入昵称" name="name" style="color:gray;"/>

内部样式表：在head中写

<style type="text/css">
	h1{
		color:green;
		font-size:18px;
	}
</style>

外部样式表：创建外部文件 .css

<link rel="stylesheet" type="text/css" href="css.css"/>

分别代表引入css文件类型text/css 文件位置

选择器

标签选择器

h1{
		color:green;
		font-size:18px;
	}

类选择器
. 类名{
属性
}

<style>
.cl{
	color:green;
}
</style>

<h1 class="cl">style样式</h1>

类选择器特殊用法

<style>
.cl{
	color:green;
}
.size{
	 font-size: 16px;
}
</style>

 <span class="cl size"></span>

Id选择器
#类名{
属性；
}

#cl{
	color:blue;
}

<h1 class="cl">style样式</h1>
<h1 id='cl' class="cl">style样式</h1>

注意是单引号

后代选择器

<style>
  .nav a{
	color:pink;
  }
  </style>

<div class="nav">
  <a href="#">内部链接</a>
  <a href="#">内部链接</a>
  <a href="#">内部链接</a>
</div>

子元素选择器
只选亲儿子

<style>
  div > strong{
  color:#66ffff;
  }
  div p strong{
	color:pink;
  }
</style>

 <body>
 <div>
 
 <strong>erzi</strong>
 <strong>erzi</strong>
 <strong>erzi</strong>
 
 </div>
 <div>
 <p>
 <strong>sunzi</strong>
 <strong>sunzi</strong>
 <strong>sunzi</strong>
 </p>
 </div>
 </body>

交集选择器
既又的关系

<style>
  p.red{
	color:red;
  }
</style>

<body>
<p class="red"> 红色 </p>
<p class="red"> 红色 </p>
<p class="red"> 红色 </p>

<div class="red"> 红色 </div>
<div class="red"> 红色 </div>
<div class="red"> 红色 </div>
</body>

并集选择器
集体声明用“，”连接

<style>
        p,
        span,
        div.red {
            color: red;
        }
</style>

链接伪类选择器

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    a:link{color:#ffff00; text-decoration:none;}
	a:visited{color:#6633ff;}
	a:hover{color:#ff6699;}
	a:active{color:#000000;}
   //顺序不要变lvha

  </style>
 </head>
 <body>
<a href="#">shouji</a>
<a href="#">shouji</a>
 </body>
</html>

字体样式

font-size:”字体大小”;
font-family:”字体种类”;
font-weight:”字体粗细(整数100-900 无单位)”
font-style:”字体风格 normal正常 italic倾斜”

unicode字体在这里插入图片描述
字体样式综合写法
font: font-style font-weight font-size/line-height font-family
不能更换顺序 除了字体大小和字体类型都能省略

 font: italic 700 20px "微软雅黑";

标签显示模式

块级元素行内元素行内块元素
相互转换display : block块/inlink行/inline-block行内块

css背景

背景色：
background-color:pink;
参数 transparent 代表透明
背景图
background-image:url(images/L.jpg );

background-repeat: repeat;//背景图像在纵向和横向平铺
background-repeat: no-repeat;//背景图像不平铺
background-repeat: repeat-x;//背景图像在X轴平铺
background-repeat: repeat-y;//背景图像在Y轴平铺

//如何定位背景图像：
background-position: 50% 50%;//第一个值是水平位置，第二个值是垂直位置
background-position: 0 0;//第一个值是水平位置，第二个值是垂直位置
background-position: top center;//可以用方位名词

背景附着
scroll 滚动和fixed 固定

简写

background: transparent url() repeat-y scroll center top;

背景透明的写法

background:rgba(0,0,0,.3);
//最后一个值为透明度区间0到1   ie9以下不支持

盒子模型

Border 边框 content 内容 padding 内边距/填充 margin 外边距
在这里插入图片描述
边框
有 3 个属性：宽度width、样式style、颜色color

可分别定义四个边
border-top
border-right
border-bottom
border-left

四种样式
border-style:dotted solid double dashed;
上边框是点状
右边框是实线
下边框是双线
左边框是虚线

常用的样式

border:1px solid #0066ff;

合并相邻的边框
border-collapse:collapse;

内边距

顺时针方向

padding:10px 5px 15px 20px;
//上内边距是 10px
//右内边距是 5px
//下内边距是 15px
//左内边距是 20px

padding:10px 5px 15px;
//上内边距是 10px
//右内边距和左内边距是 5px
//下内边距是 15px

padding:10px 5px;
//上内边距和下内边距是 10px
//右内边距和左内边距是 5px

padding:10px;
//所有 4 个内边距都是 10px

外边距

外边距跟padding一样

//块级盒子水平居中
div{
	width:950px;
	/*高度不明就不写*/
	height:700px;
	margin:0 auto;
}

清楚元素默认内外边距

 *{
        margin: 0;
        padding: 0;
}

外边距合并（外边距塌陷）
解决方式：尽量只给一个margin值

css3的圆角边框

div{border-radius:5px} 
//设置DIV对象盒子四个角5像素圆角效果
border-radius:3px 4px 5px 6px
//左上角3px圆角、右上角4px圆角、右下角5px圆角、左下角6px圆角。
//顺时针

阴影
box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur可选。模糊距离
spread可选。阴影的大小
color可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset可选。从外层的阴影（开始时）改变阴影内侧阴影

Css布局的三种机制标准流浮动定位

浮动左浮动右浮动
float: left/right
浮在普通流的上边不占有原来位置
子盒子的浮动参照父盒子对齐不会与父盒子的边框重叠，也不会超过父盒子的内边距

清除浮动
一些情况下不方便给高度，但是盒子浮动不占有位置，使得盒子高度为0，下边标准流的盒子就会上去。
清除方式1

.clear{
    clear: both;
}

清除方式2
在父级盒子里加入overflow:hidden；
缺点是不会自动换行
清除方式3

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

定位position
相对定位：原来的位置还保留，后边的盒子还以标准流的方式对待它。

绝对定位：不保留原来位置，完全脱标。
如果想要绝对定位，父级要用相对定位。

固定定位：完全不占位置，只认浏览器可视窗口

绝对定位的盒子居中
left: 50%;
transform: translateX(-50%);

z-index堆叠顺序

数越大，越靠上 不能有单位

display显示

display:none;
//隐藏盒子
display:block;
//显示盒子

visibility 属性控制元素是否可见

visible可视
hidden 隐藏但占据位置
collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。
inherit 继承上一个对象的可视性

overflow
visible 不剪切内容也不加滚动条
hidden 超过的内容是不可见的。
scroll 超过的内容会显示滚动条。
auto 超出显示滚动条，不超出不显示

cursor鼠标样式

default 默认光标（通常是一个箭头）
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
text 此光标指示文本。

<li style="cursor: pointer"></li>

轮廓线outline

一般去掉

<input type="text"style="outline:0;">

防止拖拽文本域resize

 <textarea cols="30" rows="10" style="resize: none;"></textarea>

vertical-align垂直对齐

为了使图片底部无缝隙就不能设置基线对齐

vertical-align: baseline|top|middle|bottom;
//基线对齐，顶线，中线，底线