前端 CSS 基础笔记

最新推荐文章于 2024-11-12 13:30:26 发布
原创 最新推荐文章于 2024-11-12 13:30:26 发布 · 411 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #html #前端

这篇博客详细介绍了CSS的基础知识，包括选择器、常用属性、元素显示模式和定位等核心概念。从简介到实战技巧，覆盖了CSS入门所需的各种知识点，适合初学者学习。

CSS入门

一、CSS简介

1、什么是CSS

CSS：Cascading Style Sheet 层叠样式表

是一组样式设置的规则，用于控制页面的外观样式

二、基本用法

1、css语法

<head>
	<style>
		选择器{
			属性名：属性值;
			属性名：属性值;
		}
	</style>
</head>
  • 选择器：要修饰的对象
  • 属性名：要修饰对象的哪一个属性
  • 属性值：样式的取值
<head>
	<style>
		p {
			font-size:20px;
			color:pink;
		}
	</style>
</head>

2、css的应用

2.1 内部样式
<style>
            div {
                color: pink;
            }
     </style>

<body>
    <div>
    所谓内部样式表,就是在html页面内部写样式,但是是单独写到style标签内部.		</div>
</body>
2.2 行内样式
<p style="color: pink; font-size: 20px;">夏天夏天悄悄过去留下小秘密</p>
2.3 外部样式表

使用单独的css文件，在页面中通过link标签链接外部样式文件

<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">

三、选择器

1. 基础选择器

1.1 标签选择器

使用html标签作为选择器的名称，也被称为元素选择器

1.2 类选择器

使用自定义的名称，以.作为前缀，通过HTML标签的class属性调用选择器

注：

  • 类选择器不能以数字开头
  • 调用多个类选择器时，以空格隔开
  • class属性可写多个类名
1.3 ID选择器

使用自定义的名称，以#作为前缀，通过HTML标签的id属性调用选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
			color:red;
			font-size:20px;
		}
		.hello{
			background: #cccccc;
		}
		#haha{
			color:blue;
		}
	</style>
</head>
<body>
	<p>welcome to css!</p>
	<div class="hello">welcome to css!</div>
	<h1 id="haha">welcome to css!</h1>
</body>
</html>
1.4 通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基础选择器之通配符选择器</title>
    <style>
     * {
         color: red;
     }
     /* * 这里把 html  body  div  span  li 等等的标签都改为了红色 */
    </style>
</head>
<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>
</html>

2.复杂选择器

2.1 复合选择器

标签选择器，类选择器，id选择器一起使用，不使用空格

2.2 并集选择器

可以将多个具有相同样式的选择器放在一起调用，使用逗号隔开

2.3 嵌套选择器

在选择器内部使用空格隔开，不区分父子还是后代

使用>时必须是父子关系

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器之并集选择器</title>
    <style>
        div,
        p,
        .pig li {
            color: pink;
        }
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

</html>
2.4 链接伪类选择器
  • a:link 把没有点击过的(访问过的)链接选出来
  • a:visited 选择点击过的(访问过的)链接
  • a:hover 选择鼠标经过的那个链接
  • a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器之链接伪类选择器</title>
    <style>
        a:link {
            color: #333;
            text-decoration: none;
        }
        a:visited {
            color: orange;
        }
        a:hover {
            color: skyblue;
        }
        a:active {
            color: green;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
    <a href="http://www.xxxxxxxx.com">未知的网站</a>
</body>

</html>
2.5 focus选择器

把获得光标的input表单元素选取出来

 input:focus {
            background-color: pink;
            color: red;
        }
2.6 伪元素选择器
  • :first-letter 为第一个字符的样式
  • :first-line 为第一行添加样式
  • :before 在元素内容的最前面添加的内容，需要配合content属性使用
  • :after 在元素内容的最后面添加的内容，需要配合content属性使用

3. 选择器优先级

带!important 标记的样式属性优先级最高； 样式表的来源相同时：!important > 行内样式>嵌入样式和外链样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

四、常用css属性

1. 字体属性

属性含义说明
font-family字体系列宋体，微软雅黑等
font-size字体大小px,em,rem,%
font-weight字体粗细使用数字表示加粗或变细
font-style字体样式italic，normal
font字体简写
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之复合属性</title>
    <style>
       /* 想要div文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */
       div {
           /* font-style: italic;
           font-weight: 700;
           font-size: 16px;
           font-family: 'Microsoft yahei'; */
           /* 复合属性: 简写的方式  节约代码 */
           /* font: font-style  font-weight  font-size/line-height  font-family; */
           /* font: italic 700 16px 'Microsoft yahei'; */
           font: 20px '黑体';
       }
    </style>
</head>
<body>
   <div>三生三世十里桃花,一心一意百行代码</div>
</body>
</html>

2. 文本属性

属性含义说明
color颜色英文单词，rgb,16进制
line-height行高行之间的间距
text-align水平对齐方式常用文本居中
vertical-align垂直对齐方式常用文本与图片对齐
text-indent首行缩进
text-decoration文本修饰underline,overline,
text-transform字母大小写转换首字母大小写等
letter-spacing字符间距
letter-spacing单词间距只对英文有效
white-space空白的处理文本超出后是否换行
text-shadow文字阴影
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font: 16px/28px "微软雅黑";
        }
        h1 {
            /* 文字不加粗 */
            font-weight: 400;
            /* 让H1里面的文字巨中对齐 */
            text-align: center;
        }
        a {
            /* 文本装饰为默认值 */
            text-decoration: none;
        }
        .gray {
            /* 第二行颜色为灰色 字体大小为12像素 文本居中对齐 */
            color: #888;
            font-size: 12px;
            text-align: center;
        }
        .search {

            color: #666;
            width: 170px;
        }
        .btn {
            /* 搜索字体粗细为700 */
            font-weight: 700;
        }
        p {
            /* 首行缩进两个字的距离 */
            text-indent: 2em;
        }
        .pic {
            /* 图片居中对齐 */
            text-align: center;
        }
        .footer {
            color: #888;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <h1>北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
    <p class="gray">2019-07-03 16:31:47 来源:   <a href="#">中国天气网</a>　 <input type="text" value="请输入查询条件..." class="search"> <button>搜索</button></p>
    <hr>
    <p>中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p>
    <h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4>
    <p class="pic"><img src="D:\桌面文件\html_css_material-master\html_css_material-master\第三天\images\pic.jpeg"></p>
    <p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p>
    <p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p>
    <h4>明日热度再升级！京津冀携手冲击38℃+</h4>
    <p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。 明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>
    <p>不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）</p>
    <p class="footer">本文来源：中国天气网 责任编辑：刘京_NO5631</p>
</body>
</html>

3. 背景属性

属性含义说明
background-color背景颜色transparent 透明
background-image背景图片url
background-repeat背景图片的重复方式no-repeat,repeat
background-position背景图片的显示位置方向名词或者具体位置
background-attachment背景图片是否跟随滚动scroll(默认)、fixed固定不动
background简写
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景属性复合写法</title>
    <style>
        body {
            /* background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            background-position: center top; */
            /* 把背景图片固定住 */
            /* background-attachment: fixed;
            background-color: black; */
            background: black url(images/bg.jpg) no-repeat fixed center top;
            color: #fff;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
</body>

</html>

4.列表属性

属性含义说明
list-style-type列表前的样式none,disc,circle,square
list-style-image列表前的样式图片url
list-style-position标记的位置outside,inside
list-style简写

5. 表格属性

border-collapse:表格中相邻的边框是否合并（折叠）为单一边框

取值：separated（默认） collapse

五、css元素显示模式

1. 块级元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点：

  • 自己独占一行
  • 可以控制高度，宽度，内外边距
  • 是一个盒子，里面可以放行内块或者行内元素

注：文字类标签如<p>,<h1>等等不能放其他块级元素

2. 行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

  • 相邻行内元素在同一行上，一行可以显示多个
  • 直接设置宽高是无效的
  • 默认宽度是它本身内容的宽度
  • 只能容纳文本和其他行内元素

注：链接里面不能再放链接

3. 行内块元素

在行内元素中有几个特殊的标签——<img />、<input />、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

  • 和相邻元素在同一行上，但是他们之间会有缝隙，一行可以显示多个
  • 可以设置宽高
  • 默认宽度是他内容的宽度

4. 元素显示模式的转化

  • 转化为块级元素：display:block
  • 转化为行内元素:display:inline
  • 转化为行内块元素:display:inline-block

六、盒子模型

1. 简介

盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

包括： 边框(border)、外边距(margin)、内边距(padding)、和实际内容 (content)

2.盒子

1. border
属性作用
border-width边框粗细
border-style边框的样式
border-color边框颜色
border简写

border-style的属性值：

  • none：没有边框
  • solid：单实线
  • dashed：虚线边框
  • dotted：点线边框

border-radius设置圆角边框

2. margin

margin:0,auto可以让块级元素水平居中

text-align:center可以让行内元素水平居中

3. 其他

3.1 边距合并

外边距合并：

  • 当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom 与margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
  • 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

清除内外边距：

* {
	padding:0;
	margin:0
}
3.2 盒模型的设置***

盒模型分为标准盒模型和IE盒模型

标准盒模型：width为content的宽度，box-sizing:content-box

IE盒模型：width为content+padding+border的宽度，box-sizing:border-box

3.3 盒子阴影
div:hover {
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
}

七、浮动

1. 简介

标准流： 标签按照规定好默认方式排列.

浮动： 设置浮动的图片，文字会环绕图片，设置浮动的块级元素，可以排列在一行，设置浮动的行内元素，可以设置宽高。

  • none：元素不浮动
  • left：元素向左浮动
  • right：元素向右移动

2. 浮动特性

  • 浮动元素脱离标准流,不再保留原先的位置
  • 在一行显示且与元素顶部对齐
  • 具有行内块的特性
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动元素搭配标准流父盒子1</title>
    <style>
        .box {
            width: 1200px;
            height: 460px;
            background-color: pink;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 230px;
            height: 460px;
            background-color: purple;
        }

        .right {
            float: left;
            width: 970px;
            height: 460px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
</body>

</html>

3. 注意点

  • 浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

  • 一个元素浮动了，理论上其余的兄弟元素也要浮动。

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

4. 清除浮动

原因：由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

4.1 额外标签法

额外标签法会在浮动元素末尾添加一个空的标签。例如

，或者其他标签（如
等）。

注：新的空标签必须是块级元素

4.2 父级添加overflow

可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。子不教,父之过,注意是给父元素添加代码

4.3 :after伪元素法

给父元素添加

.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix{/* IE6、7专有*/*zoom: 1;
}
4.4 双伪元素清除浮动
.clearfix:before,.clearfix:after{
	content:"";
	display:table;
}
.clearfix:after{
	clear:both;
}
.clearfix{
*zoom:1;
}
4.4 总结

  • 额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear:both）

    新添加了一个标签，会造成不必要的渲染

  • 父级添加overflow属性（overflow: hidden;）

    写法方便简单，但是如果盒子中有定位元素超出了父级，则超出部分会隐藏。

  • 使用after不会新增加标签，不回影响元素，是最流行的方法。

八、定位

1. 简介

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

值语义
static静态定位
relative相对定位，占据空间，相对于自身
absolute绝对定位，脱离文档流，不占据空间，相对于定位的父级
fixed固定定位，脱离文档流，不占据空间，浏览器可视区
sticky粘性定位，占据空间，浏览器可视区

2. 定位方式

2.1 静态定位

静态定位是元素的默认定位方式，无定位的意思。

2.2 相对定位 relative

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的

特点：

  • 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
  • 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
2.3 绝对定位 absolute

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（

特点：

  • 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。
  • 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
  • 绝对定位不再占有原先的位置。（脱标）
2.4 子绝父相

因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

2.5 固定定位 fixed

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

特点：

  • 以浏览器的可视窗口为参照点移动元素。
  • 跟父元素没有任何关系不随滚动条滚动。
  • 固定定位不在占有原先的位置。
2.6 粘性定位 sticky

粘性定位可以被认为是相对定位和固定定位的混合。

特点：

  • 以浏览器的可视窗口为参照点移动元素（固定定位特点）
  • 粘性定位占有原先的位置（相对定位特点）
  • 必须添加top 、left、right、bottom 其中一个才有效

3. 定位提升层级

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)

选择器{z-index: 1; }

九、其他属性

1. 显示与隐藏

1.1 display 属性

通过display属性设置元素是否显示，以及是否独占一行

取值含义说明
none不显示隐藏对象，不再占有原来的位置
inline行内元素行内元素的也行
block块级元素块级元素的特性
inline-block行内块元素行内块元素的特性
1.2 visibility 可见性

visibility属性用于指定一个元素应可见还是隐藏。

  • visibility：visible ;元素可视
  • visibility：hidden; 元素隐藏 ，继续占有原来的位置

2. overflow

overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

属性值描述
visible不剪切内容也不添加滚动条
hidden超出部分隐藏
scroll不管超出内容否，显示滚动条
auto超出自动显示滚动条，不超出不显示
  • display 显示隐藏元素但是不保留位置
  • visibility 显示隐藏元素 但是保留原来的位置
  • overflow 溢出显示隐藏 但是只是对于溢出的部分处理

3. outline 轮廓属性

轮廓outline,用于在元素周围绘制一个轮廓，位于border外围，可以突出显示元素

  • outline-width:轮廓宽度
  • outline-color:轮廓颜色
  • outline-style:轮廓样式
  • outline简写
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户界面样式-表单轮廓和防止拖拽文本域</title>
    <style>
        input, textarea {
            /* 取消表单轮廓 */
            outline: none;
        }
        textarea {
            /* 防止拖拽文本域 */
            resize: none;
        }
    </style>
</head>
<body>
    <!-- 1. 取消表单轮廓 -->
    <input type="text">
    <!-- 2. 防止拖拽文本域 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>

    
</body>
</html>

4. cursor 鼠标样式

设置鼠标的形状

  • default默认光标，一般为箭头
  • pointer手形，光标移动超链接上时一般显示为手形
  • move表示可移动
  • text表示文 本
  • wait表示程序正忙，需要等待
  • hep表示帮助
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户界面样式-鼠标样式</title>
</head>
<body>
    <ul>
        <li style="cursor: default;">我是默认的小白鼠标样式</li>
        <li style="cursor: pointer;">我是鼠标小手样式</li>
        <li style="cursor: move;">我是鼠标移动样式</li>
        <li style="cursor: text;">我是鼠标文本样式</li>
        <li style="cursor: not-allowed;">我是鼠标禁止样式</li>
    </ul>
</body>
</html>

十、小技巧

1. 图片和文字垂直居中对齐

img {
            /* vertical-align: bottom; */
            /* 让图片和文字垂直居中 */
            vertical-align: middle;
            /* vertical-align: top; */
        }
        textarea {
            vertical-align: middle;
        }

2. 图片底侧有空白缝隙

img {
            /* vertical-align: middle; */
            display: block;
        }

3. 单行溢出文字显示省略号

div {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            /* 这个单词的意思是如果文字显示不开自动换行 */
            /* white-space: normal; */
            /* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
            white-space: nowrap;
            /* 2.溢出的部分隐藏起来 */
            overflow: hidden;
            /* 3. 文字溢出的时候用省略号来显示 */
            text-overflow: ellipsis;
        }

4. 多行文字溢出显示省略号

div {
            width: 150px;
            height: 65px;
            background-color: pink;
            margin: 100px auto;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 3;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }

5. margin负值解决缝隙显示问题

/* ul li:hover {
           1. 如果盒子没有定位，则鼠标经过添加相对定位即可
        position: relative;
        border: 1px solid blue;

       } */
        ul li:hover {
            /* 2.如果li都有定位，则利用 z-index提高层级 */
            z-index: 1;
            border: 1px solid blue;
        }

6. 三角制作

<style>
        .box1 {
            width: 0;
            height: 0;
            /* border: 10px solid pink; */
            border-top: 10px solid pink;
            border-right: 10px solid red;
            border-bottom: 10px solid blue;
            border-left: 10px solid green;
        }

        .box2 {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-left-color: pink;
            margin: 100px auto;
        }

        .jd {
            position: relative;
            width: 120px;
            height: 249px;
            background-color: pink;
        }

        .jd span {
            position: absolute;
            right: 15px;
            top: -10px;
            width: 0;
            height: 0;
            /* 为了照顾兼容性 */
            line-height: 0;
            font-size: 0;
            border: 5px solid transparent;
            border-bottom-color: pink;
        }
    </style>

7. 去掉表单默认边框

input {outline: none; }

8. 防止拖拽文本域

textarea{ resize: none;}
前端笔记CSS
m0_59649050的博客
07-07 155
前端CSS，持续更新中
css课堂笔记前端css课堂笔记
08-05
CSS课堂笔记 本文档详细介绍了CSS的基本概念、语法、选择器、导入方式等知识点，为读者提供了系统的CSS...CSS是前端开发的基础技术，本文档为读者提供了系统的CSS基础知识，希望读者可以通过本文档快速掌握CSS技术。
黑马前端css笔记.zip
08-14
学习黑马前端36期的css笔记，快来下载吧，也可以关注我，联系我。
CSS
zhouxing的博客
09-22 234
什么是 CSS? CSS 指层叠样式表 (CascadingStyleSheets) 样式定义如何显示HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在CSS 文件中 多个样式定义可层叠为一个 CSS语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 属性（prope...
前端css笔记
qq_39041201的博客
05-13 154
自己学习前端的一些CSS笔记 普通标签 和 语义化标签 <b>加粗</b> 同 <strong>加粗</strong> <i>斜体</i> 同 斜体 <s>删除线</s> 同 <del>删除线</del> <u>下划线</u> 同 <ins>下划线</ins> 格式化标签(能识别空格和换行) <
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
前端css核心笔记
04-15
网页前端的css笔记，对于java程序员，前端也要学习一下，所以html,css必不可少
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频尚品汇项目源码
03-06
【标题】中的“尚硅谷前端入门html+css零基础教程”指的是一个由尚硅谷教育机构提供的，面向初学者的前端开发课程，主要涵盖了HTML（超文本标记语言）和CSS（层叠样式表）的基础知识。这个教程是为那些对前端开发...
CSS——前端笔记
qq_48721706的博客
04-21 3158
css前端笔记
html_css_material-master.zip
11-22
免费下载，对应博客的教学进程
前端CSS基础笔记
Toublemaker_的博客
03-20 261
外联样式 在head中通过link标签来引入外部的css样式文件 语法 <head> <link href="CSS文件的路径" rel="stylesheet" /></head> 注意 link 是个单标签 该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下： href：定义所链接外部样式表文件的URL，可以是...
前端笔记——CSS（持续更新中）~
Mike白的博客
06-20 152
CSS (Cascading Style Sheets) 是一种用于描述网页样式和布局的样式表语言。它与 HTML 配合使用，用于控制网页中元素的外观和排版。 CSS 样式由选择器和声明块组成。选择器指定要应用样式的 HTML 元素，而声明块包含一个或多个属性-值对，定义元素的样式。
前端CSS笔记整理
weixin_44480609的博客
06-01 181
1.骨架 <!--DOCTYPE：告诉浏览器使用什么规范（默认是html）--> <!DOCTYPE html> <!--语言 zh中文 en英文--> <html lang="en"> <!--head标签代表网页头部--> <head> <!--meta 描述性标签，表示用来描述网站的一些信息--> <!--一般用来做SEO（搜索）--> <meta charset="UTF-
前端css基础学习笔记
a_big_panda的博客
01-22 1220
例如： 效果：例如：效果：例如：效果：选择页面中对应的标签（找她），方便后续设置样式（改她）例如：效果：例如：效果：注意：一个id选中多个标签也有效果，但不符合规范，规范是一个id选择器只选中一个标签例如：效果：例如：效果：例如：效果：注意点：例如：效果：例如：效果：注意：注意：例如：效果：例如：效果：注意：例如：效果：例如：效果：注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置例如：效果：注意：开发中会使用text-decoration：none；清除a标签默认的下
前端CSS基础学习笔记
m0_64371862的博客
05-23 156
#博学谷IT学习技术支持# 一、css介绍 css是层叠样式表，作用是给页面中的html标签设置样式，css写在style标签中，style标签一般写在head标签里面，title标签下面。写法：选择器 { css属性 }。常见的属性：文字的颜色color、文字的大小font-size、背景颜色background-color、宽度width、高度height。 二、css引入方式 1.内嵌式 书写位置：css写在style标签中，style标签写在head标签里面，title标签的下面 作用范
【前端】CSS基础（学习笔记）
wmh的博客
12-09 177
HTML只关注内容的语义，但是丑！
【前端】CSS入门笔记+案例
最新发布
2302_78914800的博客
11-12 1260
除此之外, 标签也可以使字体倾斜, 它的效果可以被 font-style 的效果覆盖。作用: 通过 id 属性值, 找到页面中带有这个 id 属性值的标签, 设置样式。一个 id 选择器只能选中一个标签, 它类似于身份证号码, 在一个页面中是唯一的。style 标签虽然可以写在页面任意位置, 但是通常约定写在 head 标签中。结构: #id属性值{<em>css属性名: 属性值;结构: 标签名 {css属性名: 属性值;结构: .类名 {css属性名: 属性值;
前端常用CSS笔记（更新中）
qq_39055970的博客
05-22 732
常用css笔记导读常用标签美化的css方案文字的排版1、文字如何进行上下或者左右居中处理？2、第一行文字的边距 导读 前端在从前经常被后端瞧不起，究其原因，是因为后端对前端的印象还处在html、css和jQuery的时代，认为前端的工作无非就是按照美工的要求实现已有的页面，各种效果也不过是去网上进行复制黏贴，繁琐而又不能够凸显出个人能力。但是其实前端学习深入了，也不会比后端简单。比如vue等框架，将前端的工作进行模块化、组件化和工程化后，大大提高了代码的复用率，项目结构也更加合理，开发也将更加高效，使前端的
前端开发笔记：HTML与CSS基础详解
"这篇前端学习笔记涵盖了HTML基础和CSS基础的知识点，持续更新，旨在帮助学习者系统地掌握前端开发的基础技能。" 在HTML基础部分，笔记提到了以下几个关键概念： 1. `img`标签的`alt`属性：当图片无法加载时，`alt...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值