CSS笔记

最新推荐文章于 2025-04-30 10:10:09 发布
最新推荐文章于 2025-04-30 10:10:09 发布
阅读量209 收藏
点赞数
文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yxxx_5678/article/details/120373114
版权

1.如何添加CSS

①行内样式表

将样式表加入HTML文件中

<html> <div style="background:blue;"></div></html>

②内嵌样式表

将样式表嵌入HTML文件的文档头中

    <style>
      body
      { 
      background-image: url(images/psc.jpg);
      background-repeat:no-repeat;
      background-attachment:fixed;
      background-position:top;
      }
    </style>

③链接样式表

将一个外部样式表链接到HTML文件中

  <link rel="stylesheet" href="TestCss.css">

④@import引入到html

将一个外部样式表输入HTML文件中

    <style>
      @import url(TestCss.css);
    </style>
body
{ 
background-image: url(images/psc.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top;
}

2.选择器

①类选择器

<p class = "类定义名称">

.类定义名称{

        设置样式

}

②id选择器

<p id = "id名称">

#id名称{

        设置样式

}

③后代选择器

标签 标签下的标签{

        设置样式

}

④子元素选择器

标签 > 标签下的标签{

        设置样式

}

CSS 选择器参考手册https://www.w3school.com.cn/cssref/css_selectors.asp3.背景

①各种属性分开写

  • background-color
  • background-position  可以设置多个方位 例如右下

  • background-position: bottom right;

  • background-size
  • background-repeat
  • background-origin
  • background-clip
  • background-attachment
  • background-image 注意这个标签要加url（添加的图片路径）
body{ 
background-color:#00FF00;
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top;
}

②直接用background全部写

background 简写属性在一个声明中设置所有的背景属性。

body{ 
    background: #00FF00 url(bgimage.gif) no-repeat fixed top;
}

注意：背景图片跟颜色同时设置，发生冲突，那么显示的还是图片

4.标签怎么设置样式

.属性{

}

.strong {
  font-weight: 700;
  color: red;
}

5.border设置

<div id="area2"></div>
#area2 {
  height: 50px;
  width: 400px;
  border-style: solid dotted dashed double;
  border-width: 4px;
  border-color: darkgreen;
  border-left-color: rgb(50, 250, 60);
}

注意boder-style顺序： 上 右 下 左

border-radius 向 div 元素添加圆角边框

6.设置划线位置

  <div id="div6">
    <p class="lineThrough">删除线</p>
    <p class="underline">下划线</p>
    <p class="overline">上划线</p>
  </div>

#div6 .lineThrough {
  text-decoration: line-through;
}
#div6 .overline {
  text-decoration: overline;
}
#div6 .underline {
  text-decoration: underline;
}

7.间距控制

<div id="div6">
    <p class="largeLetterSpacing">我们之间间距很大</p>
</div>
#div6 .largeLetterSpacing {
  letter-spacing: 1.2em;
}

8.阴影效果

<div id="div6">
    <p class="textShadow">我有文字阴影效果，很酷炫！</p>
</div>
#div6 .textShadow {
  font-size: 2em;
  text-shadow: 2px 2px greenyellow;
}

 9.链接点击样式

<div id="div07">
        <a href="#" id="a1">链接样式1</a>
        <a href="#" id="a2">链接样式2</a>
        <a href="#" id="a3">链接样式3</a>
        <a href="#" id="a4">链接样式4</a>
</div>
#div7 #a2:hover {
  text-decoration: underline;
}
#div7 #a3:hover {
  border: 2px solid red;
}
#div7 #a4 {
  border: 1px solid black;
  padding: 10px;
}
#div7 #a4:hover {
  background-color: rgb(98, 148, 98);
}

①鼠标移动到上面变为

②

③ 

④ 鼠标移动到上面变为

 10.盒子模型综合

html的内容


<!DOCTYPE html>
<html>
<head>
  <title>CSS练习2</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  
  <div id="header">
    <h1>我的网站</h1>
    <p>Things change, roll with it.</p>
  </div>

  <div id="nav">
    <a class="active" href="#">主页</a>
    //设置.active 只会控制上面这一行，并不影响所有的a标签
    <a href="#">分类</a>
    <a href="#">归档</a>
    <a href="#">关于我</a>
    <!-- 该链接向右浮动 -->
    <a style="float: right;" href="#">登录</a>
    /*因为登录要显示在最右边*/
  </div>

  <div id="main">

    <div id="main-left">
      <ul>
        <li><a href="#">链接1</a></li>
        <li><a href="#">链接2</a></li>
        <li><a href="#">链接3</a></li>
        <li><a href="#">链接4</a></li>
      </ul>
    </div>

    <div id="main-right">
      <div class="article">
        <h3>文章1</h3>
        <img src="./images/img1.jpg" alt="小恐龙">
        <p>这是第一篇文章。</p>
      </div>
      <div class="article">
        <h3>文章2</h3>
        <img src="./images/img2.jpg" alt="小恐龙">
        <p>这是第二篇文章。</p>
      </div>
      <div class="article">
        <h3>文章3</h3>
        <img src="./images/img3.jpg" alt="小恐龙">
        <p>这是第三篇文章。</p>
      </div>
    </div>
  </div>

  <div id="footer">
    <p>版权所有：无名</p>
  </div>
</body>
</html>

css 的内容

body {
  /* 外边距 */
  margin: 0px;
}

#header {
  /* 内部元素居中 */
  text-align: center;
  /* 下内边距为1像素，可以保证副标题包含在背景中 */
  padding-bottom: 1px;
  /*还有一种方式（但是不好看）
    #header p里加个
    margin-bottom: 0px;*/
  /* 背景颜色 */
  background-color: gainsboro;
}
#header h1 {
  /* 上下外边距为0，左右自动调整 */
  margin: 0px auto;
  /* 上下内边距为20像素，左右为0像素，padding好像不支持 auto */
  padding: 20px 0px;
  /* 改变字体大小 */
  font-size: 40px;
}
#header p {
  /* 将字体设置为斜体 */
  font-style: italic;
  /* 上外边距 */
  margin-top: 0px;
}

#nav {
  /* 背景颜色 */
  background-color: slategray;
  /* 该属性可以保证背景颜色不失效 */
  overflow: hidden;
}
#nav a {
  /* 去掉下划线，因为用了href这个属性 */
  text-decoration: none;
  /* 改变字体颜色 */
  color: white;
  /* 将该元素设置成块元素，这样设置外边距和内边距时才会生效，因为a是行内元素 */
  display: block;
  /*因为它现在是浮动的，a的高度跟宽度没有超出，
  若超出，超出的部分会自动隐藏，所以上面这段代码注释了，也没有效果*/
  /* 向左浮动 */
  float: left;
  /* 设置内边距 */
  padding: 10px;
}
/* 当鼠标位于a之上时改变背景颜色 */
#nav a:hover {
  background-color: seagreen;
}

#main {
  /* 上边距 */
  margin-top: 10px;
  /* 背景 */
  /*background-color: lightgreen;这个显示不出*/
}
#main #main-left, #main #main-right {
  /* 设置浮动属性实现左右布局 */
  float: left;
  /* 该属性可以保证修改内部元素边距等大小时自己的大小不变 */
  box-sizing: border-box;
}
#main #main-left {
  /* 宽度 */
  width: 20%;
}
#main #main-left ul {
  /* 去除列表样式 */
  list-style-type: none;
  /* 左内边距设置为0像素 */
  padding-left: 0px;
  /* 上下外边距为0像素，左右自动 */
  margin: 0px auto;
}
#main #main-left ul li a {
  /* 去掉下划线 */
  text-decoration: none;
  /* 文本居中 */
  text-align: center;
  /* 改成块元素 */
  display: block;
  /* 内边距调整它们之间的距离 */
  padding: 10px 0px;
  /* 字体颜色 */
  color: black;
}
#main #main-left ul li a:hover {
  background-color: cornsilk;
}

#main #main-right {
  /* 宽度 */
  width: 80%;
  /* 内边距 */
  padding: 10px 0px;
}
#main #main-right .article {
  /* 向左浮动 */
  float: left;
  /* 宽度 */
  width: 200px;
  /* 左外边距 */
  margin-left: 15px;
  /* 内部元素居中 */
  text-align: center;
  /* 背景 */
  background-color: beige;
  /* 下外边距 */
  margin-bottom: 5px;
}
/* 鼠标移动到文章上的效果 */
#main #main-right .article:hover {
  /* 阴影效果 */
  box-shadow: 0px 0px 5px rgb(134, 134, 134);
}
#main #main-right .article img {
  /* 宽度 */
  width: 150px;
}

#footer {
  /*footer没有浮动，但是它会收到mian的影响，
  之所以别人说清除浮动，clear:both；那是因为清除main对它的影响，因为main是浮动的，
  它没有实际的高度.如果不清除浮动对footer的影响，它就会出现在main区域。*/
  /* 清除浮动效果 */
  clear: both;
  /* 内部元素居中 */
  text-align: center;
  /* 内边距 */
  padding: 5px 0px;
  /*5px改的是上下 0px改的是左右*/
  /* 背景 */
  background-color: darkgray;
}

/* 设置处于激活状态的元素的背景颜色 */
/*一般将类写在最下*/
.active {
  background-color: seagreen;
}

ul和li的用法_温故知新-优快云博客

<li>表示列表项。<ul>表示无序排列，<ol>表示有序排列。

即在<ul> </ul>中写入<li>可以构成一个无序列表，

而在<ol> </ol>中写入<li>构成的是一个有序列表

  /* 该属性可以保证背景颜色不失效 */

overflow:hidden

overflow:hidden清除浮动原理解析及清除浮动常用方法总结 - 罗Q - 博客园

  /* 该属性可以保证修改内部元素边距等大小时自己的大小不变 */

  box-sizing: border-box;

从box-sizing:border-box属性入手，来了解盒模型_qq_26780317的博客-优快云博客_border-box

box-sizing: border-box;的作用_qq_37453240的博客-优快云博客

块内元素跟行内元素区别

块级元素和行内元素 - Qingqiu_Gu - 博客园

  /* 阴影效果 */

  box-shadow: 0px 0px 5px rgb(134, 134, 134);

 CSS box-shadow 属性

持续更新…

盒子模型笔记
weixin_44066678的博客
04-12 261
盒子模型 盒子模型的组成 border 边框 content 内容 padding 内边距 就是内容距离盒子的距离 margin 外边距 盒子与盒子的距离 边框 border border 可以设置元素的边框。边框有三部分组成：边框宽度(粗细)边框样式 边框颜色。 border : border-width || border-style || border-color 属性 作用 border-width 定义边框粗细，单位是px border-style 边框的样式 borde
css进阶
09-06 92
默认的border-color 边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。 margin 的默认值是 0，所以如果没有为 margin 声明一个值，就...
css笔记
2402_88258714的博客
11-03 1211
（向色相中对应颜色中添加灰色， 0% 全灰， 100% 没有 灰） 亮度：取值范围是 0%~100%。（ 0% 亮度没了，所以就是黑色。HEX 的原理同与 rgb 一样，依然是通过：红、绿、蓝色 进行组合，只不过要用 6位（分成3组） 来 表达， 格式为：# rrggbb。HSL 是通过：色相、饱和度、亮度，来表示一个颜色的，格式为： hsl(色相,饱和度,亮度) 色相：取值范围是 0~360 度。概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆 盖）。
HTML+CSS笔记整理
2301_77576552的博客
09-29 1137
HTML+CSS学习笔记整理
CSS学习笔记
m0_58761900的博客
09-18 3201
5.1 边框:border 5.2 内边距：padding 5.3 外边距:margin 5.4 块级元素的水平居中 7.1 弹性布局：flex 7.2 水平方向的排列方式：justify-content 7.3 垂直方向的排列方式：align-items
css 笔记2
m0_68844946的博客
06-13 1844
这是div标签</div>复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。} </style> <div id="red">这是div标签
CSS笔记（精简）
weixin_46160720的博客
03-11 7674
CSS笔记 HTML 前端教程 前端笔记
前端css笔记（pink老师）
comekeywords的博客
04-11 991
css书写顺序自适应屏幕用了这个方法以后，如果希望页面内的盒子也适应屏幕大小，则使用以下方法，会根据父亲的宽高计算出该盒子的宽高margin和padding也可以这样用，padding可以撑开盒子，某些时候这样使用很方便。兼容性适配 浏览器私有前缀兼容老版本，新版本无需添加。li去除小点,a去除下划线,去除input聚焦时的默认框元素的显示模式（块级，行内，行内块）表单域form点击后可跳转到index.html并传递锚点链接 name=输入内容location对象的search可获得?
狂神说视频-CSS笔记.pdf
11-12
CSS 笔记 CSS（Cascading Style Sheets）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。它可以静态地美化网页，也可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行...
CSS笔记(1).pdf
01-26
CSS笔记 CSS（Cascading Style Sheets），即层叠样式表，是一种用于描述网页样式的语言。CSS的出现拯救了混乱的HTML，让HTML专注于结构呈现，而样式交给CSS处理。 一、CSS简介 1.1 CSS的发展历程 从HTML被发明...
HTMLCSS笔记.pdf
07-14
HTML与CSS笔记 HTML（HyperText Markup Language，超文本标记语言）是构成网页内容的骨架，用于创建网页的结构，并通过不同的标签来描述网页的各个部分。CSS（Cascading Style Sheets，层叠样式表）则负责网页的...
CSS笔记II
皮鞭蘸碘伏边抽边消毒
01-15 1373
CSS3最全笔记 ，非常详细，HTML5+CSS3 详细完全体笔记
CSS基础_@拉钩教育【笔记】
m0_65273147的博客
04-30 414
划重点：RGB颜色6位16进制，每2位分别控制红/绿/蓝,例如:#00ff00 绿色#ff0000 红色#ff00ff 紫色 #红、蓝都参一点。
jQuery UI CSS 框架 API
csbysj2020
04-29 393
jQuery UI 是一个开源的 JavaScript 库，它基于 jQuery，提供了一套丰富的用户界面组件和交互效果。CSS 框架 API 是 jQuery UI 的核心之一，它允许开发者通过简单的 CSS 样式来定制和美化网页界面。jQuery UI CSS 框架 API 为开发者提供了丰富的样式和交互效果，可以帮助我们创建美观、交互性强的网页界面。通过本文的介绍，相信大家对 jQuery UI CSS 框架 API 有了一定的了解。
全面了解CSS语法 ! ! !
最新发布
2301_76849350的博客
04-30 1138
CSS（层叠样式表）是网页设计的灵魂之一，它赋予了网页活力与美感。无论是为一个简单的个人博客增添色彩，还是为复杂的企业网站设计布局，CSS都是不可或缺的工具。那么，CSS语法到底是什么样的呢？它背后有哪些秘诀值得我们掌握？本文将深入浅出地为你解开CSS语法的所有疑惑，带你一步一步探索如何用CSS打磨你的网站。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值