CSS基础入门

最新推荐文章于 2021-06-05 02:06:04 发布
最新推荐文章于 2021-06-05 02:06:04 发布
阅读量411 收藏
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xx_yan/article/details/105156288
版权
这篇博客介绍了CSS的基础知识，包括CSS的作用、样式定义的优先级、基础语法、选择器类型，如颜色值、ID选择器、类选择器、属性选择器，以及如何插入CSS样式，如外部样式表、内部样式表和内联样式。同时强调了选择器的堆砌和样式继承的概念。
摘要由CSDN通过智能技术生成

CSS基础入门

CSS 概述

CSS Cascading Style Sheet - 层叠样式表

样式定义HTML元素的展示

目的

结构html - 行为js - 样式css相分离

样式定义的优先级

优先级从高至低：

  1. 内联样式
    html 元素中的 style 属性
  2. 内部样式表
    标签内部插入的样式
  3. 外部样式表
  4. 浏览器缺省设置

CSS基础语法

CSS语法构成

选择器 { 属性 : 值 }

selector {
   
	property1: value1;
	property2: value2;
	...
	propertyN: valueN
}

选择器

被设定样式html元素
花括号中为设定的属性和对应值

颜色值的不同表示方法
p {
    color: #ff0000; }
p {
    color: #f00; }
p {
    color
最低0.47元/天 解锁文章
minisal
关注
专栏目录
CSS学习<2>
MayerF的专栏
11-16 473
一、CSS派生选择器 作用：通过根据元素在上下文之间的关系来定义样式，可以是标记更加简洁。 派生选择器的英文名称是contextual selectors（直译是上下文选择器）。 在CSS1中依据这种规则的选择器称为上下文选择器（contextual selectors），在CSS2中称为派生选择器。 派生选择器允许你根据上下文之间关系来确定某个标签的样式。通过合理使用派生选择器，可以使H
css基础入门
YUWA的博客
12-31 869
css基础 层叠样式表css特性：层叠性，继承性[h系和a标签除外（浏览器内核有个默认样式）] 优先级：！important>行内样式（嵌入标签）>id选择器>类选择器>标签选择器>默认样式css基础 css选择器 行高相关属性 文本元素属性 连接伪类和a标签相关属性 背景属性 border相关属性 浮动布局float 定位相关属性position 元素之间的转换属性 css初始化css选
CSS 派生选择器（四）
mzoy的专栏
07-29 1720
  派生选择器通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于他们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。派生选择器允许你根据文档的上下文关系来确定某个标签的样
HTML中 下列( )标记为强制换行,2017自学考试网页设计练习试题
weixin_28750663的博客
06-05 891
2017自学考试网页设计练习试题一、单项选择题(本大题共25小题，每小题1分，共25分)1.主机域名www.yahoo.com.cn由四个子域组成，代表国别的代码是( )A.wwwB.yahooC.comD.cn2.网页制作工具按照其工作方式可分为( )A.HTML语言和非HTML语言两大类B.DHTML方式和JavaScript方式两大类C.标注型网页制作工具和所见即所得型网页制作工具两大类D....
CSS Selectors Level 4新特性全面解析
小秋博客
12-06 384
作者：李滨泓，曾实习于饿了么大前端部，爱开源，爱技术，爱Google的所有东西。 本文为《程序员》原创文章，未经允许不得转载，更多精彩文章请订阅2017年《程序员》 责编：陈秋歌，关注前端开发领域，寻求报道或者投稿请发邮件chenqg#csdn.net。欢迎加入“CSDN前端开发者”微信群，参与热点、难点技术交流。请加群主微信「Rachel_qg」,申请入群，务必注明「公司+职位...
CSS之派生选择器（上下文选择器）
勿六七的博客
07-02 9280
选择器（selector）是CSS里面非常重要地一部分知识。根据我暂时浅薄地理解，CSS就是对一份HTML代码里面的元素进行运用各种样式。所以，第一步就是要准确地定位你想要运用样式的元素。CSS里面通过各种选择器来定位元素。 CSS里面选择器有很多种，今天就只想说说 “派生选择器”。一听“派生选择器”这个名字，我真心做不到见名知义地感觉它是什么选择器。一看英文名叫“contextual selec...
Div+Css基础入门教程
最新发布
07-25
Div+Css基础入门教程
CSS基础入门到精通实战
06-10
《CSS基础入门到精通实战》课程是一门针对初学者精心设计的全面教程，旨在帮助学习者从零开始掌握CSS，并逐步提升至高级实战水平。课程内容涵盖了CSS的基础知识，包括选择器、盒模型、布局方式、样式继承、浮动、...
CSS基础入门视频课程
06-11
课程中使用的所有英文单词都会逐一查询并记录，真正做到零基础入门学习，最适合初学者的教程，让你少走弯路！课程内容包括：1.CSS简介2.CSS基本用法3.选择器4.常用CSS属性5.盒子模型6.定位方式7.其他CSS属性8.页面...
CSS
dayanjun的博客
09-28 257
css CSS(Cascading Style Sheets) 层叠样式表、CSS样式表、样式表   后缀 .css selector{property:value}   选择符{属性：属性值} selector{property1:value;property2:value;property3:value;……} p{font-family:"隶书";color:re
【Qt界面个性化】大杀器——qss
热门推荐
Voidsky
05-12 4万+
自学qt一年多了，也捣鼓做了不少东西了，发现qt比mfc强大的地方就在与它的简洁和强大的qss。 如果学qt不知道qss那基本就和美观的界面无缘了。简单来说，qss就源于网页的css（语法也基本一样一样的）所以如果你之前懂一些css的知识，学qss那是非常快的。 css学习：http://www.w3school.com.cn/css/css_syntax.aspqss能做什么？1.可以换
CSS基础（一）
bowean的博客
11-15 233
CSS基础（二）本文参考了http://www.w3school.com.cn/css/什么是CSS 层叠样式表 (Cascading Style Sheets) 可以独立与html文档，存在于.css文件中 可被应用到多个html文档中 可以使html文档专注的表示文档内容而不需要考虑样式 优先级 最高：内联样式，在标签内部声明 其次：内部样式，在head标签声明 再次：外部样式，在.css文件中
CSS选择器
迁就100
07-12 169
一、CSS选择器 元素选择器 Selector { property1: value1; property2: value2; } 属性选择器 优先级越高越严格，会覆盖之前的样式，当多个CSS样式定义都可以对某个HTML元素起作⽤时，该HTML元素的显示外观将是多个CSS样式定义"迭加"作⽤的效果。如果多个CSS样式定义之间有冲突时，则冲突属性以优先级更⾼的CSS样式取胜。 如果是数...
CSS display | opacity | visibility的区别；回流与重绘
xx_yan的博客
03-29 3873
opacity=0 该元素变透明，但是不会改变页面布局。 并且若此元素绑定了事件，点击该元素所占区域时，响应事件同样会被触发。 visibility=hidden 该元素变为不可见，但是不会改变页面布局。 对用户不可见后，点击相应的区域也无法触发绑定的事件 display=none 该元素不再展示，会改变页面布局 点击相应的区域也无法触发绑定的事件 ...
CSS定位的四种类型：static | relative | absolute | fixed
xx_yan的博客
03-31 722
CSS定位文档流定位的四种类型static 静态定位relative 相对定位absolute 绝对定位abdolute不生效对齐优先级fixed 固定定位 文档流 文档流也被称为normal flow普通流，是元素在html中的排列方式。 block元素单独占一行垂直排列，inline元素在行内从左至右依次排列。 定位的四种类型 static 静态定位 静态定位是默认的定位方式。它遵循正常的文档...
CSS垂直居中
xx_yan的博客
03-31 250
CSS垂直居中transform: translateY(-50%)flexposition: absolute + margin: -50px 0 0 0; transform: translateY(-50%) 1）使用top: 50%使得元素上边界偏移至页面竖直方向上的中心线 2）使用position: relative使得实际展示的元素相对于本身位置进行偏移 3）使用transform: ...
CSS 盒模型
xx_yan的博客
03-28 120
盒子模型 Box Model 我们可以将html中的元素可以看作一个box，然后对这个box本身和box与周围box的放置进行设置。即，盒模型用于对元素进行布局，布局内容包括外边距margin、边框border、内边距padding和实际内容content四个部分。四个部分的排列方式如下图所示： 标准盒模型与怪异盒模型 现有两种盒子模型：W3C的标准盒模型和IE的怪异盒模型。 大部分浏览器都以W3...
HTML与CSS基础入门指南
"该文档是关于HTML和CSS的基础知识总结，适合初学者学习，内容涵盖了HTML5的新特性、HTML的基本框架、常用标签、字体样式、链接和锚点等基础知识。" 在前端开发中，HTML（HyperText Markup Language）和CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值