CSS笔记

最新推荐文章于 2024-08-18 23:31:20 发布
最新推荐文章于 2024-08-18 23:31:20 发布
阅读量169 收藏
点赞数
文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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的用法_温故知新-CSDN博客

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

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

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

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

overflow:hidden

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

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

  box-sizing: border-box;

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

box-sizing: border-box;的作用_qq_37453240的博客-CSDN博客

块内元素跟行内元素区别

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

  /* 阴影效果 */

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

 CSS box-shadow 属性

持续更新…

「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
盒子模型笔记
weixin_44066678的博客
04-12 213
盒子模型 盒子模型的组成 border 边框 content 内容 padding 内边距 就是内容距离盒子的距离 margin 外边距 盒子与盒子的距离 边框 border border 可以设置元素的边框。边框有三部分组成：边框宽度(粗细)边框样式 边框颜色。 border : border-width || border-style || border-color 属性 作用 border-width 定义边框粗细，单位是px border-style 边框的样式 borde
css笔记
qq_53231262的博客
01-23 2017
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结css基础选择器1. css选择器的作用2. 选择器分类01-标签选择器02-类选择器03-id选择器04-通配符选择器05-总结css字体属性1. 字体体系2. 字体大小3. 字体粗细4. 文字样式5. 文字复合属性写法6. 字体属性总结css文本属性1. 文本颜色2. 对齐文本3. 装饰文本4. 文本缩进5. 行间距6. 文本总结css的引入方式1. 三种样式表2
css进阶
09-06 69
默认的border-color 边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。 margin 的默认值是 0，所以如果没有为 margin 声明一个值，就...
CSS学习笔记
m0_58761900的博客
09-18 3059
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 1752
这是div标签</div>复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。} </style> <div id="red">这是div标签
CSS笔记（精简）
weixin_46160720的博客
03-11 5380
CSS笔记 HTML 前端教程 前端笔记
CSS笔记II
皮鞭蘸碘伏边抽边消毒
01-15 1281
CSS3最全笔记 ，非常详细，HTML5+CSS3 详细完全体笔记
B站pink老师HTML+CSS笔记
m0_56428225的博客
07-20 3143
b站pinkl老师HTML+css笔记（包括h5c3+移动端)
CSS笔记.pdf
07-14
1. **外部样式表**：通过`<link>`标签引用外部CSS文件，例如`<link rel="stylesheet" type="text/css" href="文件路径" />`，这种方式便于管理和复用样式，适用于大型项目。 2. **内部样式表**：在HTML文档的`<head>...
html css笔记
01-27
### HTML CSS 笔记知识点详解 #### 页面自动刷新 页面自动刷新是指网页可以在设定的时间间隔后自动重新加载，实现页面内容的更新。这种技术在早期的网页开发中较为常见，通常用于实现简单的内容轮播或者定时获取...
css笔记1
qq_61466402的博客
03-13 7868
目录 css语法 实例 例子解释 css选择器 css使用 三种使用css的方法 外部 CSS 内部 CSS 行内 CSS 多个样式表 层叠顺序 css注释 实例 实例 实例 HTML 和 CSS 注释 css颜色 css背景色 CSS 文本颜色 CSS 边框颜色 CSS 颜色值 实例 css背景 CSS background-color css背景图像 css背景重复 css背景附着 css背景简写 css语法 CSS 规则集（rule...
css设置元素居中显示
DN金猿的博客
08-18 259
CSS中实现居中显示可以通过不同的属性来实现，取决于你是要水平居中还是垂直居中，或者两者都要。4.水平和垂直居中 - 使用flexbox。选择合适的方法取决于你的具体需求和上下文。5.水平和垂直居中 - 使用定位和转换。6.水平和垂直居中 - 使用grid。1.水平居中 - 行内元素或文本。2.水平居中 - 块级元素。3.垂直居中 - 单行文本。
【前端 23】用Less优化你的CSS书写体验
最新发布
delepaste的博客
08-18 843
Less（Leaner Style Sheets）是一种CSS预处理器，它扩展了CSS的功能，引入了变量、嵌套规则、混合（Mixins）、运算等特性，使得CSS编写更加灵活和强大。下面，我们将详细介绍如何在VS Code中使用Less，包括基础语法和一些实用的VS Code插件。
CSS的:only-child伪类：精准定位单一子元素的样式艺术
2402_85758349的博客
08-18 533
伪类选择器是CSS中用来选择元素的特定状态或属性的关键字。例如，:hover伪类用于选择鼠标悬停时的元素。伪类则用于选择唯一的子元素。
CSS的:read-write和:read-only伪类：增强表单元素的样式与用户体验
liuxin33445566的博客
08-17 496
伪类在CSS中用于选择不在文档树中的元素，或者根据元素的特定状态来选择元素。和:read-only伪类就是根据输入字段是否可编辑来选择元素。
pink老师css笔记
08-17
很抱歉，我无法根据提供的引用内容回答你的问题，因为引用内容并没有提到"Pink老师CSS笔记"这个话题。如果你有关于"Pink老师CSS笔记"的具体问题，我将非常乐意帮助你回答。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [CSS知识点整理（pink老师课程的学习笔记）](https://blog.csdn.net/m0_53975499/article/details/113576769)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [HTML+CSS学习笔记（pink老师前端课程笔记--补档）](https://blog.csdn.net/weixin_44524703/article/details/121071964)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值