CSS基础学习笔记

最新推荐文章于 2024-08-25 21:41:11 发布
最新推荐文章于 2024-08-25 21:41:11 发布
阅读量365 收藏
点赞数
分类专栏： 前端（HTML/CSS） 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kuyeluofan/article/details/41408809
版权

仅仅是自己对着W3CSchool整理的一些 CSS 基础知识点，敲一遍加深下印象也方便以后复习。


    • CSS概述
      • CSS指层叠样式表（Cascading Style Sheets）
      • 样式定义如何显示HTML元素
      • 样式通常存储在样式表中
      • 把样式添加到HTML4.0中，是为了解决内容与表现分离的问题
      • 外部样式表可以极大提高工作效率
      • 外部样式表通常存储在CSS文件中
      • 多个样式定义可以层叠为一
      • 层叠次序
        • 一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中（优先级从低到高）
          • 浏览器缺省设置
          • 外部样式表
          • 内部样式表（在<head>标签内）
          • 内联样式（在HTML元素内部）
        • 个人理解：距被控制的元素越近，优先级越高
    • CSS基础语法
      • CSS规则由两个主要部分构成：选择器和声明（可以同时多条，用分号隔开）
        • 格式：selector {declaration;declaration2;…declarationN}
      • 选择器：即需要改变样式的HTML元素
      • 声明：属性和值
        • 属性和值被冒号分开
        • 格式:property:value
      • 即CSS规则格式为 selector(property:value;porperty2:value;…}
        • 例如：h1{color:red;font-size:14px}
      • 值的不同写法和单位
        • 颜色:
          • 颜色名（如 color:red;）
          • 十六进制颜色值（如 color:#ff0000;）
          •  缩写（如color:#f00）目的：节约字节
          • RGB（如 color:rgb(255,0,0); 或 color:rgb(100%,0%,0%);
          • 其他情况使用0时不需要单位，例如0即为0px
        • 值为单词：
          • 需要给值加引号
          • 例如：p{font-family:"sans serif"}
        • 代码风格
          • 在每条声明末尾都加上分号
          • 每行只描述一个属性
        • 空格和大小写
          • 空格不影响CSS
          • 大小写不影响CSS
          • 例外：与HTML一起工作时，class和 id名称对大小写敏感
    • CSS高级语法
      • 选择器的分组
        • 例如:h1,h2,h3,h4,h5,h6{color:green;}
      • 继承及其问题
        • 根据CSS，子元素从父元素继承属性
        • 例外：Netscape4和IE6不仅忽略继承，也忽略应用于body的规则
          • 对策：使用组选择器进行冗余声明
        • 摆脱继承：在子元素中重新声明相同的属性
    • CSS派生选择器
      • CSS1中称为上下文选择器
      • 根据文档中的上下文关系来确定某个标签的样式
      • 例如：使列表中所有的strong元素变为斜体字

    li strong {

    font-style: italic;

    font-weight: normal;

    }

     

    <p><strong>我是粗体字，但不在列表中，故不会变成斜体</strong></p>

    <ol>

    <li><strong>我是粗体字，因为在li中，所以会变成斜体</strong></p>

    <li>虽然在li中，但我不是粗体字，所以也不会变成斜体</li>

    </ol>

    • 个人理解：相当于逻辑与关系
    • CSSid选择器
      • id选择器以"#"来定义
        • 例如：（结合下方代码共同作用）

    #red {color: red}

    #green {color: green}

    • id选择器可以为标有特定 id的 HTML元素指定特定的样式
      • 例如：（结合上方代码共同作用）

    <p id="red">这个段落是红色。</p>

    <p id="green">这个段落是绿色。</p>

    • 注意：id属性只能在每个 HTML 文档中出现一次！
    • id选择器和派生选择器
      • 在现代布局中，id选择器常常用于建立派生选择器
        • 例如：应用于出现在 id是 sidebar的元素内的段落

    #sidebar p {

    font-style: italic;

    text-align: right;

    margin-top: 0.5em;

    }

    • 即使被标注为 sidebar的元素只能在文档中出现一次，这个 id选择器作为派生选择器可以多次使用
      • 例如:

    #sidebar p {

    font-style: italic;

    }

    #sidebar h2{

    font-style: bold;

    }

    • 单独的选择器
      • id选择器即使不被用来创建派生选择器，它也可以独立发挥作用
        • 例如：

    #sidebar {

    border: 1px dotted #000;

    padding: 10px;

    }

    • 例外：老版本的IE会忽略这条规则，除非特别定义这个规则所属的元素:

    div#sidebar {

    border: 1px dotted #00;

    padding: 10px;

    }

    • CSS类选择器
      • 在CSS中，类选择器以一个点号显示
        • 例如：所有拥有 center类的 HTML元素均为居中

     .center{text-align: center}

    <h1 class="center">

    我将被居中。

    </h1>

    <p class="center">

    我也将被居中。

    </p>

    • 注意：类名的第一个字符不能使用数字！它无法在 Mozila或 Firefox中起作用。
    • 和 id一样，class也可被用作派生选择器
      • 例如：

    .fancy td {

    color: #f60;

    background: #666;

    }

    <td class="fancy">

    • CSS属性选择器
      • 对带有指定属性的 HTML元素设置样式
      • 注意：只有在规定了 !DOCTYPE时，IE7和 IE8才支持属性选择器，在 IE6及更低版本中不支持！
      •  属性选择器
        • 例如：为带有 title属性的所有元素设置样式

    [title]

    {

    color: red;

    }

    • 属性和值选择器
      • 例如：为title="W3School"的所有元素设置样式：

    [title=W3School]

    {

    border:5px solid blue;

    }

    • 属性和值选择器-多个值
      • 例如：为包含指定值的 title属性的所有元素设置样式（适用于由空格分隔的属性值）

    [title~=hello] {color: red;}

    • 例如：为带有包含指定值的 lang属性的所有元素设置样式（适用于由连字符分隔的属性值）

    [lang|=en]{color: red;}

    • 设置表单的样式
      • 属性选择器在为不带有 class或 id的表单设置样式时特别有用：
      • 例如:

    input[type="text"]

    {

    width: 150px;

    display: block;

    margin-bottom: 10px;

    background-color: yellow;

    font-family: Verdana, Arial;

    }

    • 参考手册（个人理解：类似正则表达式？貌似使用正则速度会变慢）

    选择器

    描述

    [attribute]

    用于选取带有指定属性的元素

    [attribute=value]

    用于选择带有指定属性和值的元素

    [attribute~=value]

    用于选取属性值中包含指定词汇的元素

    [attribute|=value]

    用于选取带有以指定值开头的属性值的元素，该值必须是整个单词

    [attribute^=value]

    匹配属性值以指定值开头的每个元素

    [attribute$=value]

    匹配属性值以指定值结尾的每个元素

    [attribute*=value]

    匹配属性值中包含指定值的每个元素

    • CSS创建
    • 插入 CSS样式表的方法有三种
      • 外部样式表
        • 当样式需要应用于很多页面时
        • 该表一个文件来改变整个站点的外观
        • 每个页面使用<link>标签链接到样式表，<link>标签在 head 中

    例如：浏览器会从 mystyle.css中读到样式声明，并根据它来格式文档

    <head>

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

    </head>

    • 外部样式表不能包含 html标签，应该以 .css拓展名进行保存

    例如：

    hr {color: sienma;}

    p {margin-left: 20px}

    body {background-image: url("images/back40.gif")}

    注意：不要再属性值和单位之间留空格！（20px而不是 20 px）！

    • 内部样式表
      • 当单个文档需要特殊的样式时
      • 使用<style>标签在 head 中定义内部样式表
      • 例如：

    <head>

    <style type="text/css">

    hr {color: sienna;}

    p {margin-left: 20px;}

    body {background-image: url("images/back40.fig");}

    </style>

    </head>

    • 内联样式
      • 当样式仅需要在一个元素上应用一次
      • 慎用：会使得表现和内容混杂在一起
      • 例如：

    <p style="color: sinema; margin-left: 20px">

    This is a pragraph

    </p>

    • 多重样式
      • 某些属性在不同的样式表中被同样的选择器定义，属性值将从更具体的样式表中继承
      • 例如：

    外部样式：

    h3{

    color: red;

    text-align: left;

    font-size: 8pt;

    }

    内部样式：

    h3{

    text-align: right;

    font-size: 20pt;

    }

    个人理解：根据各个样式表优先级形成新的虚拟样式表

    {

    color: red;

    text-align: right;

    font-size: 20pt;

    }

     

     

     


kuyeluofan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS基础学习笔记一（详细）
Speed_Pig的博客
03-04 2802
文章目录初识CSS 初识CSS
css基础学习笔记之字体图标
01-08
一、字体图标的运用克服了精灵图的缺点： 1.图片文件还是比较大的 2.像素图片放大或缩小会失真 3.一旦完整精灵图片制作完成后想要更换非常复杂 二、字体图标–iconfont：展示的是图片，本质是属于字体，字体图标有三...
CSS基础
gfh
04-21 356
一．CSS选择器 1.什么是CSS CSS，即层叠样式表，定义了如何展现HTML元素的样式 优点： HTML负责结构，CSS负责外观，职责分离更清晰 系统更新和维护更轻松 极大的提高工作效率，一个样式表管理多个页面 2.CSS基本语法 CSS定义语法：是一个样式定义的指令集，可包含多个样式定义 每条规则的最后一条样式定义可以不以分号结尾，但实际工作中，让每条样式定义(声明)都以分号...
CSS三种漂亮的＜hr＞水平线样式
美奇软件开发工作室
03-11 4万+
hr.style-one {/*内嵌水平线*/width:80%;margin:0 auto;border: 0;height: 0;border-top: 1px solid rgba(0, 0, 0, 0.1);border-bottom: 1px solid rgba(255, 255, 255, 0.3);}hr.style-two {/*透明渐变水平线*/width:80%;margin...
前端css基础学习笔记
a_big_panda的博客
01-22 947
例如： 效果：例如：效果：例如：效果：选择页面中对应的标签（找她），方便后续设置样式（改她）例如：效果：例如：效果：注意：一个id选中多个标签也有效果，但不符合规范，规范是一个id选择器只选中一个标签例如：效果：例如：效果：例如：效果：注意点：例如：效果：例如：效果：注意：注意：例如：效果：例如：效果：注意：例如：效果：例如：效果：注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置例如：效果：注意：开发中会使用text-decoration：none；清除a标签默认的下
CSS基础学习笔记（一）
weixin_40971244的博客
07-09 491
CSS基础学习笔记（一）一、CSS简介1. CSS语法规范二、CSS基本使用2.1 CSS基础选择器2.1.1 CSS选择器作用2.1.2 CSS选择器分类2.1.3 CSS标签选择器2.1.4 CSS类选择器2.1.5 Id选择器2.1.6 通配符选择器2.1.7 选择器总结2.2 CSS字体属性2.2.1 字体系列（font-family）2.2.2 字体大小（font-size）2.2.3 字体粗细（font-weight)2.2.4 字体样式（font-style)2.2.5 font复合属性2.2
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
HTML CSS基础学习笔记
xbean1028的博客
03-01 9654
HTML CSS基础 文章目录HTML CSS基础标签属性块级标签与行级标签选择器超链接伪类 标签 标签分类 标签名 英文 英文含义 标签类型 HTML页面结构 < html> HyperText Markup Language 超文本标记语言 < head> head 头部 < title> title 网页标题 &lt...
尚硅谷CSS学习笔记
MissXu666的博客
10-10 1338
等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。③维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。我们在编码时，不用过于关注浏览器的私有前缀，不用去记忆，去查询，因为常用的css3 新特性，主流浏览器都是支持的，对于老版本浏览器，我们也可以借助现代构建工具，去帮我们添加私有前缀。
web基础之css基础学习笔记
来日浅谈的博客
04-02 2436
web基础之css基础学习笔记一. 概念二. css的好处三. css的使用四. css的语法五. 选择器六. 属性 页面美化和布局控制。 一. 概念 Cascading Style Sheets 层叠样式表 层叠：多个样式可以作用在同一个html的元素上，同时生效 二. css的好处 功能强大 将内容展示和样式控制分离 1. 降低耦合度。解耦 2. 让分工协作更容易 3. 提高开发效率 ...
CSS 学习笔记
weixin_42098295的博客
05-06 1269
定位（Positioning）：static, relative, absolute, fixed, sticky。组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)。媒体查询（Media Queries）：根据不同的屏幕尺寸或设备特性应用不同的样式。属性选择器：根据元素属性选择，如 [type="text"]。Grid：二维布局模型，提供网格系统，进行更复杂的布局设计。伪元素选择器：如 ::before, ::after。
学习CSS基础过程笔记
03-26
学习 CSS 基础过程笔记是前端开发者的必备技能之一，本笔记总结了 CSS 的基础知识点，涵盖选择器、常见样式、布局案例等多方面的内容。 选择器 选择器是 CSS 中最基本也是最重要的概念之一。选择器用于选择 HTML ...
css经典学习笔记.zip
11-01
一、CSS基础 CSS的基本结构包括选择器和声明块。选择器用于指定要应用样式的元素，如`p`代表所有的段落，`.class`代表具有特定类名的元素，`#id`则对应ID为特定值的元素。声明块由花括号包围，内含一组属性：值对，...
CSS基础学习的笔记
10-25
### CSS基础学习知识点 #### 一、HTML应用CSS的三种方法 在网页设计中，CSS (Cascading Style Sheets) 是一种用来描述 HTML 或 XML (包括各种 XML 语言如 SVG、XHTML 等) 文档样式的语言。它允许我们将样式与结构...
小兔鲜首页制作css
qq_65046523的博客
08-21 433
项目名-客户端xtx-pc1.images：存放固定使用的图片，例如：logo、样式修饰图2.uploads:存放非固定图片，例如：商品图、宣传图等需要上传的图片3.iconfont:字体图标素材4.css文件：4.1base.css：基础的公共样式4.2common.css：各个网页相同模块的重复样式，例如头部、底部4.3index.css：首页css样式5.index.html：首页html文件。
Tailwind CSS的介绍和使用
mq1314520_zhl的博客
08-21 380
Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。他快速、灵活、可靠，没有运行时负担。Font Family - TailwindCSS中文文档 | TailwindCSS中文网。
CSS中flex：1是什么属性
ggq53219的博客
08-22 385
是 CSS 中的一个简写属性，用于设置 Flex 项目的灵活伸缩比例（flex-grow）、收缩比例（flex-shrink）以及基础大小（flex-basis）。主要是用来告诉 Flex 容器中的项目，如果有剩余空间，它们应该等比例地放大，如果空间不足，它们也应该等比例地缩小，而它们的初始大小（在没有额外空间或需要缩小的情况下）是。（尽管这通常不是预期的行为，特别是当你想让项目根据其内容大小开始时）。为了更精确地控制项目的大小和伸缩行为，你可能会想使用更明确的。
高亮你的文字：CSS ::selection 伪元素的魔法
最新发布
2401_85342379的博客
08-25 281
伪元素用于设置用户通过鼠标或键盘操作选中的文本的样式。这包括改变选中文本的背景色、文字颜色等。它是一个非常实用的工具，用于增强网页的视觉效果和交互性。
HTML5与CSS基础学习笔记
"这是一份关于HTML5和CSS的学习笔记，包含了HTML的基本认知、标签、标签间的关系、DOCTYPE声明、字符集、常用排版标签、文本格式化标签、标签属性的使用、图像标签以及链接标签等内容，适合初学者参考学习。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值