CSS笔记1

最新推荐文章于 2024-07-16 17:18:30 发布
最新推荐文章于 2024-07-16 17:18:30 发布
阅读量913 收藏 1
点赞数 2
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66506641/article/details/122675489
版权

一.简介

-成叠样式表

-网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式

而最终我能看到的最上边一层

-总之一句话，CSS用来设置网页中元素的样式

二.编写的位置

1.内联样式，行内样式

在标签内部通过style属性来设置元素的样式

<p style="color:red; font-size:50px;">内容</p>

2.内部样式表

将样式编写到head中的style标签里

<head><style>

p{ color:green; font-size: 50px; }

</style></head>

3.外部样式表

将css样式编写到一个外部的css文件

然后用link标签来引入外部的css文件,写在head标签中

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

css文件格式：p{ color:green;font-size: 50px; }

三.语法

1.基本语法：选择器 声明块

2.选择器：通过选择器可以选定页面中的元素

（1）常见选择器

  1. 元素选择器

            作用：根据标签名来选中指定的元素

            语法：标签名{}

            例子：p{} h1{}

  2. id选择器

            作用：根据元素的id属性值选中一个元素

            语法：#id属性值{}

            例子：#red{} #box{}

  3. 类选择器

            作用：根据元素的class属性值选中一组元素

            语法：.class属性值

  4. 通配选择器

            作用：选中页面中所有的元素

            语法：*{}

（2）复杂选择器

  1. 交集选择器

                作用：选中同时符合多个条件的元素

                语法：选择器1选择器2选择器n{}

                注意：如果交集选择器有元素选择器，必须选择元素选择器开头

  2.  并集选择器(选择器分组)

                作用:   同时选择多个选择器对应的元素

                语法：选择器1，选择器2，选择器n{}

（3） 关系选择器

  1. 子元素选择器

        作用：选中指定父元素的指定子元素

        语法：父元素>子元素{}

  2. 后代元素选择器

        作用：选中指定元素内的指定后代元素

        语法：祖先 后代{}

  3. 选择下一个兄弟

        语法：前一个+下一个{}

  4. 选择下边所有兄弟

        语法：兄~弟{}

 (4)    属性选择器

    [属性名]选择含有指定属性的元素

    [属性名=属性值] 选择含有指定属性和属性值的元素

    [属性名^=属性值] 选择属性值以指定值开头的元素

    [属性名$=属性值] 选择属性值以指定值结尾的元素

    [属性名*=属性值] 选择属性值中含有某值的元素

    例：<style> p[title]{color:orange}</style>

（5） 伪类选择器

 -伪类(不存在的类，特殊的类)

        - 伪类用来描述一个元素的特殊状态

          比如：第一个子元素、被点击的元素、鼠标移入的元素···

          伪类一般情况下都是使用：开头

          ：first-child（第一个子元素）

          ：last-child（最后一个子元素）

          ：nth-child()(选中第n个子元素)

          特殊值

            n  第n个 n的范围0到正无穷

            2n 表示选中偶数位的元素

            2n+1或odd 表示选中奇数位的元素

 *以上这些伪类都是根据所有的子元素进行排序

    ：first-of-type

    :  last-of-type

    : nth-of-type

   这几个伪类的功能和上述的类似，不同点是它们是在同类型元素中进行排序

a元素的伪类

     :  link 用来表示没访问过的链接(正常的链接)

     :  visited 用来表示访问过的链接（这两个a元素特有）

        由于隐私的原因，所以这个伪类只能修改链接的颜色 

     ：hover 用来表示鼠标移入的状态

     ：active  用来表示鼠标点击

         例：a:link{color:orange;}  a:visited{color: red;}

伪元素 表示页面中一些特殊的并不真实存在的元素（特殊的位置）

        伪元素使用::开头

        ::first-letter 表示第一个字母

        ::first-line 表示第一行

        ::selection 表示选中的内容

        ::before  元素的开始

        ::after 元素的最后

        before和after 必须结合content属性来使用

   例p::first-letter{color: orange;}

       p::first-line{background-color: pink;}

       p::selection{background-color: green;}

       div::before{content: "123";color: pink;}

       div::after{content: "123";color: pink;}

3.声明块：通过声明块来指定为元素设置的样式

小新没蜡笔m
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS笔记1.docx
05-07
【CSS简介】 CSS，全称为层叠样式表（Cascading Style Sheets），是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它的主要功能是分离网页的内容（HTML或其他标记语言）与表现形式，...
css笔记1
qq_61466402的博客
03-13 7623
目录 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学习笔记
m0_58761900的博客
09-18 3047
5.1 边框:border 5.2 内边距：padding 5.3 外边距:margin 5.4 块级元素的水平居中 7.1 弹性布局：flex 7.2 水平方向的排列方式：justify-content 7.3 垂直方向的排列方式：align-items
css学习笔记1
qq_42236791的博客
12-12 915
HTML（结构）、CSS（表现）、行为（JavaScript）CSS的全称：层叠样式表（Cascading Style Sheets）。CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽高等。简单理解：CSS可以美化HTML，让HTML更漂亮。核心思想：HTML搭建结构，CSS添加样式，实现了：结构与样式的分离。
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS笔记
weixin_58509345的博客
12-16 2475
一、基础认知 CSS：层叠样式表 CSS的作用：给页面中的HTML标签设置样式 1.1CSS语法规则 写在哪里？ CSS写在style标签中，style标签一般写在head标签里面，title标签下面 怎么写？ CSS初体验 常见属性：color（文字颜色）font-size（字体大小）background-color（背景颜色）width（宽度）height（高度） 注意点：1、CSS标点符号都是英文状态下的2、每一个样式键值对写完之后，最后需要写分号 1.2CSS引入方式 1.2.
HTML CSS整理笔记
Lin16819的博客
12-12 3万+
常见字体单位： 1.em 移动端常用的字体尺寸单位，说白em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5。 但当div进行嵌套时，em始终按当前div继承的字体大小来缩放。 2.rem r是root的意思，即相对于根节点html的font-size进行缩放，当有嵌套关系时，嵌套关系的元素的字体大小始终按照根节点的字体大小...
css 笔记2
m0_68844946的博客
06-13 1729
这是div标签</div>复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。} </style> <div id="red">这是div标签
前端css基础学习笔记
a_big_panda的博客
01-22 910
例如： 效果：例如：效果：例如：效果：选择页面中对应的标签（找她），方便后续设置样式（改她）例如：效果：例如：效果：注意：一个id选中多个标签也有效果，但不符合规范，规范是一个id选择器只选中一个标签例如：效果：例如：效果：例如：效果：注意点：例如：效果：例如：效果：注意：注意：例如：效果：例如：效果：注意：例如：效果：例如：效果：注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置例如：效果：注意：开发中会使用text-decoration：none；清除a标签默认的下
CSS 学习笔记
weixin_42098295的博客
05-06 1258
定位（Positioning）：static, relative, absolute, fixed, sticky。组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)。媒体查询（Media Queries）：根据不同的屏幕尺寸或设备特性应用不同的样式。属性选择器：根据元素属性选择，如 [type="text"]。Grid：二维布局模型，提供网格系统，进行更复杂的布局设计。伪元素选择器：如 ::before, ::after。
CSS学习笔记目录
wz_1992的博客
05-30 435
CSS学习笔记之基础教程（一） CSS学习笔记之基础教程（二） CSS学习笔记之中级教程（一） CSS学习笔记之中级教程（二） CSS学习笔记之中级教程（三） CSS学习笔记之高级教程（一） CSS学习笔记之高级教程（二） CSS学习笔记之高级教程（三） CSS学习笔记之高级教程（四）
CSS3笔记1
08-04
【CSS3笔记1】 CSS（Cascading Style Sheets）是一种样式表语言，用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。CSS负责网页的布局和外观，是网页设计中的关键组成部分。 ### CSS的发展历程 自...
css笔记
04-02
这本“css笔记”是对CSS技术的深入理解和实践的总结，旨在帮助开发者巩固基础知识，提升技能水平。 **基本概念** 1. **选择器**：CSS通过选择器来定位HTML元素，如标签选择器（`p`）、类选择器（`.myClass`）、ID...
CSS笔记.pdf
07-14
1. **外部样式表**：通过`<link>`标签引用外部CSS文件，例如`<link rel="stylesheet" type="text/css" href="文件路径" />`，这种方式便于管理和复用样式，适用于大型项目。 2. **内部样式表**：在HTML文档的`<head>...
Web前端-Web开发CSS基础3-盒模型
a15735748145a的博客
07-16 459
1. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；2. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；3. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；
Web前端-Web开发CSS基础6-弹性盒子
最新发布
a15735748145a的博客
07-16 1104
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
Web前端-Web开发CSS基础5-浮动
a15735748145a的博客
07-16 346
1. 设置<div>元素的宽为100像素，高也为100像素，并且向左悬浮；12. 设置类名为class1的元素，让其自动下移到右边没有悬浮元素为止；13. 设置类名为class2的元素，让其自动下移到右边没有悬浮元素为止；14. 设置类名为class3的元素，让其自动下移到右边没有悬浮元素为止；9. 设置<button>元素，让其自动下移到左边没有悬浮元素为止；10. 设置<input>元素，让其自动下移到左边没有悬浮元素为止；11. 设置<img>元素，让其自动下移到左边没有悬浮元素为止；
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
uu0216的博客
07-16 513
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。
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、付费专栏及课程。

余额充值