CSS笔记

最新推荐文章于 2025-05-19 23:03:11 发布

冲鸭szg

最新推荐文章于 2025-05-19 23:03:11 发布

阅读量463

点赞数

分类专栏：杂文章标签： css css3

本文链接：https://blog.youkuaiyun.com/SxihuanZ/article/details/119613602

版权

杂专栏收录该内容

15 篇文章

订阅专栏

CSS:PS的功能用代码实现

视频链接
基于狂神说视频教程。

仅供参考(很多没听明白)

CSS三种样式

内部样式表

这个代码将css和html写在了一起一般情况下是要求分开编写。
优先级比外部样式表高。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- style 内部可以进行css代码的编写 css的注释和c++的注释相同为/* */-->
    <!--
    语法：记得声明后面要以分号结尾 
	对该页面上所有的相应标签起作用
    选择器{
        声明1;
        声明2;
        声明3;
    }
    -->
    <!--标题变红 点击之后可以根据调色框选择任意颜色-->
    <style>
        h1{
            color: red;

        }

    </style>
</head>
<body>
<h1>我的标题</h1>
</body>
</html>

分开的话就要求有一个css文件，记得和html文件在同一路径下。

外部样式表

css文件为

h1{
    color: red;
}

html文件为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css1.css">
</head>
<body>
<h1>我的标题</h1>
</body>
</html>

使用link将两个文件进行关联，达到合在一起的要求。运行结果和内部样式表相同。

行内样式(内联样式)

<!--当想要偷懒时，可以采用行内样式 在标签元素中 百编写一个 style属性 编写样式即可
这种方式的优先级最高 。  其满足就近原则。
-->
<h1 style="color: red">我的标题</h1>

css的优势:

1、内容和表现分离
2、网页结构表现统一，可以实现复用3、样式十分的丰富
4、建议使用独立于html的css文件
5、利用SEO，容易被搜索引擎收录!

css基础选择器

标签选择器：

就是上面的例子格式

当多个标签时，中间使用逗号隔开

类选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        类选择器  .class的名称{ }
        好处是可以归类，不同类型的标签都可以使用 可以复用
         */
        .one{
            color: red;
        }
        .two{
            color: aqua;
        }

    </style>
</head>
<body>
<!--当想要偷懒时，可以采用行内样式 在标签元素中 百编写一个 style属性 编写样式即可-->
<h1 class="one">我的标题</h1>
<h1 class="two">我的标题</h1>
<h1 class="one">我的标题</h1>
<p class="two">我的标题</p>

</body>
</html>

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        id选择器  #id的名称{ }
        只能在一个标签里面使用 全局唯一
        否则不会报错但会警告
         */
        #one{
            color: red;
        }
    </style>
</head>
<body>
<!--当想要偷懒时，可以采用行内样式 在标签元素中 百编写一个 style属性 编写样式即可-->
<h1 id="one">我的标题</h1>
</body>
</html>

优先级 不满足就近原则

id选择器>类选择器>标签选择器

css的层次选择器

适用于标签出现了各种嵌套组合时

/*后代选择器 只要在这个元素(body)(也可以是其他标签:)里面的 p类标签 就都满足这个选择器  。
body里面的所有p标签变红
*/
body p{
    background: red;
}
/*子选择器 仅作用于这个元素的下一代
body里面的第一代p标签全部变绿
两个元素中间是大于号。。。
*/
body>p{
    background: green;
}
/*相邻兄弟选择器 仅作用于这个元素向下数的 第一个 同辈兄弟 不做用于当前有选择器的这个标签
两个元素中间为加号
下面使用了类选择器
*/
.active+p{
    background: blue;
}

/*通用选择器 当前选中元素的 向下的 所有 同辈兄弟 
两个元素中间为波浪线
*/
.active~p{
    background: pink;
}

html的相邻兄弟选择器代码

<p class="active">p0</p>
<p >p1</p>
<p >p2</p>
<p >p3</p>

css的结构伪类选择器

结构伪类选择器，可以根据元素在文档中所处的位置，来动**态选择元素，**从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。

/*  选中ul 中的第一个li类型子元素
    如果有多个ul 每个ul的第一个子元素都会被选择

     获取第二个参数的父级元素，如果该父级元素的为第一个参数或者为第一个参数的祖先元素（例如body），
	 就获取该父类元素的第一个li类型的子元素

     冒号前面有两个参数 第一个参数ul默认是body 第二个参数指定需要改变的类型
     冒号后面的具体来确定位置，也可以设为last-child选中最后一个元素
*/
	ul li:first-child{
    background: red ;
}
 /*选中当前元素的父级元素，并且当父级元素的第一个子元素是当前元素时，该属性才会生效
 所以冒号前面的元素不同效果不同
 如果为h1 则只有h1变红
 如果为p 则没有东西变红
 如果为ul 则没有东西变红
 如果为li 则两处的li1变红
 body p :nth-child(1) 和 p :nth-child(1) 中效果是相同的
 */
 h1:nth-child(1){
     background: yello;
 }
 /*选中当前元素的父级元素，选择父级元素的第二个和当前元素相同类型的元素（前提是存在），该属性生效*/
p:nth-of-type(2){
    background: green;
}

元素的结构位置图代码：

<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
<p>p3</p>
<ol>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ol>
</body>

属性选择器

[title="titil"]/*只要html代码标签中含有title属性 且等于titil 就会被应用这个选择器*/
{
}
[title *="titil"]/*只要html代码标签中含有title属性 且包含 titil 就会被应用这个选择器*/
{
}
a[href]/*只要代码的 a标签 中含有href属性 就会被应用这个选择器*/
{
}
a[href ^="http"]/*只要代码的 a标签 中含有href属性 且以http开头 就会被应用这个选择器*/
{
}
a[href $="jpg"]/*只要代码的 a标签 中含有href属性 且以jpg结尾 就会被应用这个选择器*/
{
}
img[alt]/* 对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像 */
{
}

/*属性可以不断累加 
a[href][title][name] 等等*

美化网页

font-family :字体种类
font-size:字体大小
font-weight:bold 字体加粗
color:#000000 RGB颜色 每两个数字表示红绿蓝中的一个颜色
color:rgba(0,255,255,0.3)红绿蓝和透明度
text-olign;排版 在块中实现居中
text-indent:2em  段落首行缩进
ling-height ：行高
height：块高 只有行高和块高相等 实现了上下居中
border：1px solid red 后面跟着三个参数 边框的宽度，样式，颜色 
text-decoration:underline 下划线 若为none则通常用于a标签（超链接）去下划线
img.top {vertical-align:text-top}  top为img的class名称 垂直对齐一幅图片； 可选为middle放于中间； text-bottom 放于底部
a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover{color:red;font-size:50px;} 鼠标在这个标签悬浮时变成红色，且变大  说明都可以想要的效果叠加
a:active {color:green;} 鼠标点击时变成绿色
/*为了产生预期的效果，在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后
！a:active 必须位于 a:hover 之后！*/
text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径

列表

/*ul li */
list style:
	none 去掉小圆点
	cicle 改成小圆圈
	decimal有序化
	square 正方形
text-indent:3em 缩进3字符
height：设置高度

背景图像应用及渐变

background-image:url("images/1.jpg");//默认全部平铺
background-repeat:repeat-x//只横向平铺第一层
background-repeat:repeat-y//只纵向平铺第一列
background-repeat:no-repeat//不平铺 就单纯以左上角为原点显示该图片
/*正常情况下 背景属性后面跟着颜色 【图片 图片位置 平铺方式】*/
/*图片位置根据不断调试来确定 颜色指的是这个标签的背景颜色 这个背景也可以叠加存放图片就是中括号的内容*/
bakcground:red url(".//image/1.jpg") 270px 10px no-repeat

渐变Grabient

通过这个网站来配比渐变色然后复制自动生成的代码到自己的网页中

background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

盒子模型及边框使用

（/此处应有盒子模型的图片加载失败/）
在网页的调试界面可以手动更改然后观察效果最后应用到自己的代码中。。

margin：外边距

padding：内边距

border：边框

border: 1px solid red ; /*边框 后面跟着三个属性粗细 样式 颜色*/
padding:2cm 4cm 3cm 4cm;/*后面跟着四个内边距值 按照上右下左顺时针排列*/
margin：0 auto;/* 后面可以跟着四个外边距也可以跟着两个外边距（上下，左右为auto。实现了居中对齐【前提是父元素有固定宽度】）*/
/*当然 如果想只改一个方向的 如 margin-bottom 只是更改了下外边距*/

border-radius :10px /*圆角边框 对角进行圆润化 也可以写多个参数 符合顺时针排列  调大数值可以实现将正方形变成圆形或者扇形*/
box-shadow :10px 10px 1px yellow/*盒子阴影*/

display和float

/*display :
		block块元素  div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。
		inline行内元素 span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中
		inline-block 是块元素但是可以在一行
display可以将一个不能和其他标签同处一行的块元素改成一个行内元素同理也可以反过来
*/

浮动

/*浮动：会使元素向左或向右移动，其周围的元素也会重新排列。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。
float: right 浮动起来然后靠右边
*/
/*
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear:right右侧不允许有浮动元素 否则会排到浮动元素的下面
clear:both 两侧都不允许有浮动
*/

解决父级边框塌陷的解决方法：

增加父级元素的高度

#father{
    border:1px #000 soild;
    height;800px;
}

增加一个空的div标签，清除浮动

.clear{
    clear:both;
    margin:0;
    padding:0;
}
<div class="clear"></div>

父级元素中加入 overflow：hidden;

在父类增加一个伪类after

#after:after{
    content:'';
    display:block;
    clear:both;
}

以下截取于w3chool

假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码：

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

不幸的是出现了一个新的问题，由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它。

clear 属性实例 - 对空元素应用清理

(就是添加一个新的div标签然后clear-both)

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }
/*添加一个新的div 然后设为both*/
.clear {
  clear: both;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

除此之外，还有另外一种方法，那就是对容器 div 进行浮动：

.news {
  background-color: gray;
  border: solid 1px black;
    /*对容器 div 进行浮动*/
  float: left;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

这样会得到我们希望的效果。不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。

事实上，W3School 站点上的所有页面都采用了这种技术，如果您打开我们使用 CSS 文件，您会看到我们对页脚的 div 进行了清理，而页脚上面的三个 div 都向左浮动。

overflow

overflow 属性规定当内容溢出元素框时所采取的措施

/* overflow:
		visible:默认值。内容不会被修剪，会呈现在元素框外面。
		scroll;如果超过了框的显示范围，内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
		auto;如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
*/

定位

相对定位

position:relative;/*相对定位 相对于默认的位置移动 与仍然在标准文档流中，原来的位置后被保留*/
top:-20px; /*向上移动20单位== 距离上边 减少 20单位*/
left:20px;/*向右移动20单位==距离左边框 增加 20单位*/

绝对定位

position:absolute;/*绝对定位不在标准文档流中，原来的位置后不被保留*/
/*在没有父级元素的前提下，相对于浏览器边框进行 定位 */
/*如果存在父级元素，亦要将父级元素的position设为relative 才能辅助于子元素的定位*/
top:-20px; /*距离上边负20单位 一般不写负数哦*/
left:20px;/*位置为距离左边框20单位*/

固定定位

position:fixed;/*固定定位通常用于在页面的滚动条滚动时 绝对定位和相对定位都会发生变化 而固定定位位置不变*/
/*常应用于滚动条旁的回到顶部 页面右下角的赞赏，联系方式等*/
bottom:30px; /*距离上边负20单位 一般不写负数哦*/
right:20px;/*位置为距离左边框20单位*/

z-index

z-index常用于设置图层的优先级 优先级越高图层越在上面 最低为0 最大无限制
与之配套使用的是opacity：  设置不透明度  来达到更好的效果 范围为【0，1】 默认为1