CSS学习笔记

最新推荐文章于 2024-05-30 14:49:04 发布
最新推荐文章于 2024-05-30 14:49:04 发布
阅读量115 收藏
点赞数
分类专栏： 前端 文章标签： css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44755735/article/details/107811940
版权

CSS学习笔记

1、什么是CSS

CSS 即层叠样式表 (Cascading Style Sheets)

2、CSS有什么用

样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

3、CSS的使用

  1. 语法

    CSS主要由两部分组成

    • 选择器：通常是需要改变样式的HTML元素
    • 声明：每条声明由一个属性和一个值组成，是设置自己想要的样式属性

img

p
{
color:red;
text-align:center;
}

  1. 选择器

    • id选择器：标有特定 id 的 HTML 元素指定特定的样式

      #para1
{
    text-align:center;
    color:red;
}

    • 类选择器:用于描述一组元素的样式，即可以对多个HTML元素指定特定的样式

      .center 
{
    text-align:center;
}

    • 组合选择

      • 后代选择器(以空格分隔)

        div p
{
  background-color:yellow;
}
/*
div标签中的内嵌的全部p标签都选上
*/

      • 子元素选择器(以大于号分隔）

        div>p
{
  background-color:yellow;
}
/*
只选择div的下一层的p标签，即子元素不包括孙以及后面的
*/

      • 相邻兄弟选择器（以加号分隔）

        div+p
{
  background-color:yellow;
}
/*
选择紧接在div元素后的p元素，且二者有相同父元素
*/

      • 普通兄弟选择器（以破折号分隔）

        div~p
{
  background-color:yellow;
}
/*
全部兄弟都选了
*/

  2. CSS的创建方式(优先级从上往下依次增大)

    • 外部样式表(External style sheet)：引入外部文件

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

    • 内部样式表(Internal style sheet)：在HTML文件内直接编写css代码

      <head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

    • 内联样式(Inline style)：直接在标签内部加上style属性设置样式

      <p style="color:sienna;margin-left:20px">这是一个段落。</p>

  3. CSS伪类

    CSS伪类是用来添加一些选择器的特殊效果

    /*使用伪类的格式*/
selector:pseudo-class {property:value;}

/*CSS类使用伪类的格式*/
selector.class:pseudo-class {property:value;}

/*anchor伪类 */
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
/*
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

注意：伪类的名称不区分大小写。
*/
/*-----------------------------------------------------------------------*/

/*伪类与 CSS 类的配合使用*/
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a>

    常用的伪类选择器

    /*匹配第一个p元素*/
p:first-child
{
    color:blue;
}
/*匹配所有<p> 元素中的第一个 <i> 元素*/
p > i:first-child
{
    color:blue;
}
/*匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素*/
p:first-child i
{
    color:blue;
}

  4. 常用的声明（属性）

    • background

      /*背景颜色*/
body {
    background-color:#b0c4de;
}
/*背景图像*/
body {
    background-image:url('paper.gif');
}
/*背景图像 - 水平或垂直平铺*/
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;/*水平平铺 可以设置为no-repeat不平铺  repeat-y为垂直平铺*/
}
/*
所有background的属性都可以写出background但有一个固定的顺序
background-color
background-image
background-repeat
background-attachment
background-position
*/

    • 文本

      /*文本颜色*/
body {color:red;}
/*文本的对齐方式*/
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}/*每一行被展开为宽度相等，左，右外边距是对齐*/
/*文本修饰*/
h1 {text-decoration:overline;}上划线
h2 {text-decoration:line-through;}划线
h3 {text-decoration:underline;}下划线
/*文本转换*/
p.uppercase {text-transform:uppercase;}全转大写
p.lowercase {text-transform:lowercase;}全转小写
p.capitalize {text-transform:capitalize;}首字母大写
/*文本缩进*/
p {text-indent:50px;}

    • 字体

      /*设置字体*/
p{
    font-family:"Times New Roman", Times, serif;
}
/*字体样式*/
p.normal {font-style:normal;}正常字体
p.italic {font-style:italic;}斜体
/*字体大小*/
h1 {font-size:40px;}

    • 链接

      /*常用*/
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
/*删除链接中的下划线*/
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
/*背景颜色*/
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

    • 列表样式

      ul
{
    list-style: square url("sqpurple.gif");
}
/*
可以按顺序设置如下属性：

list-style-type:指定列表项标记的类型是
list-style-position :设置列表中列表项标志的位置（不常用，可以只使用前后两个）
list-style-image:引入外部图片作标记
*/

    • 表格

      /*表格边框*/
table, th, td
{
    border: 1px solid black;
}
/*折叠边框*/
table
{
    border-collapse:collapse;
}
table,th, td
{
    border: 1px solid black;
}
/*表格宽度和高度*/
table 
{
    width:100%;
}
th
{
    height:50px;
}
/*表格文字对齐*/
td
{
    text-align:right;
}
/*表格填充*/
td
{
    padding:15px;
}
/*表格颜色*/
table, td, th
{
    border:1px solid green;
}
th
{
    background-color:green;
    color:white;
}

  5. 盒子模型
    在这里插入图片描述

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。
div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
/*
border对应的属性有
	style：实闲、虚线、不要线
	width：线的宽度
	color：颜色
margin（padding）
	四个属性全填写：各边距的顺序上右下左
	三个属性填写：上左右下
	两个属性填写：上下左右
	一个属性：全是一样

*/

理解：

将一个html元素想象成一个盒子内的物品，物品有其外壳叫border，有内部结构叫content，内部结构和外壳的距离叫内边距padding，外壳和盒子的距离叫外边距margin

4、布局属性

  1. display

    区和块元素转换

    /*转换成内联元素（行）*/
li {display:inline;}
/*转换成块元素（多行）*/
span {display:block;}

  2. position

    /*static定位，即默认的，正常观看的那样*/
div.static {
    position: static;
    border: 3px solid #73AD21;
}
/*fiexd定位，元素的位置在浏览器固定*/
p.pos_fixed
{
    position:fixed;
    top:30px;
    right:5px;
}
/*relative 定位：相对于初始位置进行移位*/
h2.pos_left
{
    position:relative;
    left:-20px;
}
/*absolute 定位：相对于浏览器页面进行移位*/
h2
{
    position:absolute;
    left:100px;
    top:150px;
}
/*sticky 定位：类似于置顶*/
div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

  3. z-index属性可以定义元素的堆叠位置

    img
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}
/*置于底层*/

  4. overflow

    值描述
    visible默认值。内容不会被修剪，会呈现在元素框之外。
    hidden内容会被修剪，并且其余内容是不可见的。
    scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
    inherit规定应该从父元素继承 overflow 属性的值。

  5. float(浮动)

    CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。（往往用于图像）

    .thumbnail 
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}
/*
* float有left和rigth属性，分别是左浮动和右浮动的意思
* clear属性，可以清除浮动
* 当有多个浮动元素放一起，它们会相邻
*/
JD_Magi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 学习笔记
09-25
在CSS学习过程中，了解并熟练掌握ID和Class的使用是非常基础且重要的。ID与Class都是CSS选择器，但它们有着不同的特性和应用场景。 ID选择器（#）的主要优点在于其高优先级，这意味着当需要为特定元素赋予特殊样式...
css学习笔记
12-20
本人自己学习CSS过程中亲自总结的思维导图，结构清晰，重点突出，便于记牢
css学习笔记1
qq_42236791的博客
12-12 921
HTML（结构）、CSS（表现）、行为（JavaScript）CSS的全称：层叠样式表（Cascading Style Sheets）。CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽高等。简单理解：CSS可以美化HTML，让HTML更漂亮。核心思想：HTML搭建结构，CSS添加样式，实现了：结构与样式的分离。
EPICS工具CSS学习笔记
qq_43456972的博客
10-13 2260
控制系统工作室(CSS)是一项实现控制系统相关的应用，主要针对的是操作员界面。它是基于目前的软件技术（Java、Eclipse），并特别强调了互操作性。 使用Centos7.0系统作为EPICS环境开发，搭建了CSS基础的控件操作，并成功运行。
CSS学习笔记目录
wz_1992的博客
05-30 448
CSS学习笔记之基础教程（一） CSS学习笔记之基础教程（二） CSS学习笔记之中级教程（一） CSS学习笔记之中级教程（二） CSS学习笔记之中级教程（三） CSS学习笔记之高级教程（一） CSS学习笔记之高级教程（二） CSS学习笔记之高级教程（三） CSS学习笔记之高级教程（四）
前端css基础学习笔记
a_big_panda的博客
01-22 921
例如： 效果：例如：效果：例如：效果：选择页面中对应的标签（找她），方便后续设置样式（改她）例如：效果：例如：效果：注意：一个id选中多个标签也有效果，但不符合规范，规范是一个id选择器只选中一个标签例如：效果：例如：效果：例如：效果：注意点：例如：效果：例如：效果：注意：注意：例如：效果：例如：效果：注意：例如：效果：例如：效果：注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置例如：效果：注意：开发中会使用text-decoration：none；清除a标签默认的下
【CSS学习笔记】
weixin_45037690的博客
08-12 771
Cascading Style Sheet 层叠样式表CSS：表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动CSS1.0CSS2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEOCSS2.1：浮动，定位CSS3.0：圆角、阴影、动画…浏览器兼容性。
h5+css学习笔记
m0_62410752的博客
03-15 396
个人学习笔记，自己看的
黑马程序员pink老师_CSS学习笔记
热门推荐
weixin_46764819的博客
03-07 1万+
CSS参考手册网址 一、CSS字体样式属性 font-size：字号 相对长度单位 说明 em 相当于当前对象内文本的字体尺寸 px 像素【最常用，推荐使用】 绝对长度单位 说明 in 英寸 cm 厘米 mm 毫米 pt 点 font-family：字体样式 p { 　　font-family: "宋体"；／＊可以写多个字体，用英文逗号隔开，表示找不到１字体去找２字体，.
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
html和css学习笔记
03-16
### HTML与CSS学习笔记 #### 一、基础知识概述 HTML（HyperText Markup Language）与CSS（Cascading Style Sheets）是构建网页的基础技术。通过学习HTML与CSS，我们可以创建结构化且美观的网页。 - **WWW (World ...
前端三件套css学习笔记分享
02-24
前端三件套css学习笔记分享
CSS学习笔记（手写版）
最新发布
07-26
这份手写版的CSS学习笔记涵盖了CSS基础到进阶的核心内容。内容包括CSS选择器、盒模型、布局技术（如Flexbox和Grid）、响应式设计、动画效果、以及常见的CSS框架和工具介绍。每个主题都有清晰的示例和实用的技巧，...
CSS学习笔记～～～～
05-17
在`CSS学习笔记-01.md`、`CSS学习笔记-02.md`和`CSS学习笔记-03.md`中，可能会深入讲解这些概念，包括更多选择器用法、布局技巧、CSS3特效和预处理器的使用，帮助读者逐步掌握这个强大的样式语言。
HeadFirst HTML&CSS学习笔记.zip
12-29
CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 Head...
CSS学习笔记：从入门到精通
"这是一份关于CSS学习的文档，作者参考了狂神的课程，旨在深化前端技术理解，特别是为了更好地学习Vue.js。文档详细介绍了CSS的基础知识，包括CSS的概念、发展历史、快速入门方法、选择器、网页美化、盒子模型以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值