我们知道 css 我们知道 css 作用是美化 HTML 网页和控制页面布局的,接下来我们来学习一下经常使用一些样式属性。1.
学习慕课网笔记,课程:http://www.imooc.com/code/2024 1.css选择器 子选择器:parent>child 子选择器是指选择parent的范围内的第一个子元素。...2.元素分类 在css中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。...2.3内联块状元素 内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素(css2.1)img,input...inline-block元素特点: 和其他元素都在一行上; 元素的高度、宽度、行高以及顶和底边距都可以设置; 3.盒子模型 3.1什么是盒子模型 css中,盒子模型是关于元素的宽高的。如下图: ?...4.布局 css包含
CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。...css的四种引入方式 1.行内式 行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。...文件引入到HTML文件中 1 4.导入式 将一个独立的.css...的优先级 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。...css属性操作 css text 文本颜色:color 颜色属性被用来设置文字的颜色。
CSS基础 CSS基础知识 选择器(重要!!!)...继承、特殊性、层叠、重要性 CSS格式化排版 单位和值 盒模型 浮动 相对定位与绝对定位 布局初探 CSS基础知识 认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets...外部式css样式,写在单独的一个文件中 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在内(不是在标签内...下面注意一个特殊情况: 当给 font-size 设置单位为 em 时,此时计算的标准以父元素p的 font-size 为基础。...盒模型 CSS 盒模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和 的方式,页面中的所有标记都可以看成是一个盒子,盒模型是我们对网页 行定位的基础,而定位是我们对网页元素进行位置固定的重点知识
一、CSS简介 css概念 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。 ...css语法 ? css注释 /*这是注释,随便写,不影响css代码*/ 二、CSS的引用方式 行内引用 行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。... 三、CSS选择器 基本选择器 元素(标签)选择器 p {color: "red...四、选择器的优先级 CSS继承 选择优先级 继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。...p { color: green; } 此外,继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。
介绍css相关知识 和 非布局属性。 css:Cascading Style Sheet 层叠样式表,简而言之 就是css的样式 是可以叠加的。...默认 是根据css选择器的权重,按权重进行叠加,权重值大的css 覆盖 权重小的css。 基本规则 选择器{ 属性:值; 属性:值; } * 选择器作用:用来匹配html元素。...从右向左解析css选择器,这样做的目的是:为了加快 浏览器对css选择器的解析速度。...important', 它就是最重要的 不会被其它css样式覆盖掉. * 内联的style 优先级高于 (外部样式表 和 style标签中的样式),也高于 id选择器 * 相同权重 后写的生效
什么是 CSS?...外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一个 css 层叠样式表 如一个div元素可以添加多个样式,一个样式可以重复添加在一个元素上,以优先级最高|最近的为主 css 的使用方式;...标签进行引入 如: 优先级:谁离元素近,就优先显示谁 ---- css选择器 基础选择器,关系选择器,属性选择器...掌握基础选择器:重点 #id选择器: 根据元素的id属性选中某个元素 .class: 根据元素的class属性值选中一组元素,可以添加多个元素名,选择其一即可 元素选择器: 根据元素名选择一组元素...* -- 通配符: 选中当前中的所有元素(常用来清除浏览器的默认样式) /*清除浏览器的默认样式,如p标签的内外边距等*/ *{ padding:0; margin:0; } 基础选择器的优先级
文件,推荐的使用方式,结构样式分离,易于修改维护,优点:CSS 文件能够缓存在浏览器;缺点:增加请求次数 body { background-color: blue..." type="text/css" href="css/test.css"> body { background-color: blue.../css" href="css/test.css"> html5 结论:内联样式的优先级最大,选择器一样的情况下,...后定义的相同 css 属性会覆盖前面定义的,后面的样式生效 CSS 选择器 CSS 选择器的书写格式为:选择器 + 大括号,大括号里面书写 css 属性样式,键值对 key : value 以冒号 :
前端基础之CSS CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。...css的四种引入方式 1.行内式 行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。..." href="样式.css" type="text/css"> 段落样式1 4.导入式 将一个独立的.css文件引入HTML...文件中,导入式使用CSS规则引入外部CSS文件,标记也是写在标记中,使用的语法如下: 注意: 导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题...div{ border:1px solid #222 } hello yuan css的优先级 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。
一、什么是CSS对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定二、CSS发展史三、CSS基本语法结构1、语法选择器{ 声明1; 声明2; … }2、例如h1...:方便在同页面中修改样式缺点:不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底3、外部样式表CSS代码保存在扩展名为.css的样式表中HTML文件引用扩展名为.css的样式表,有两种方式链接式...:…………导入式:……CSS样式优先级:行内样式>内部样式表>外部样式表,就近原则六、CSS基本选择器1、标签选择器HTML标签作为标签选择器的名称
1. display 属性的使用display 属性是用来设置元素的类型及隐藏的,常用的属性有:none 元素隐藏且不占位置inline 元素以行内元素显示bl...
什么是 css 元素溢出当子元素(标签)的尺寸超过父元素(标签)的尺寸时,此时需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来完成。
1. css 的定义 css(Cascading Style Sheet)层叠样式表,它是用来美化页面的一种语言。...没有使用css的效果图 图片 使用css的效果图 图片 2. css 的作用 美化界面, 比如: 设置标签 文字大小、颜色、字体加粗等样式。 控制页面布局, 比如: 设置浮动、定位等样式。...3. css 的基本语法 选择器{ 样式规则 } 样式规则: 属性名1:属性值1; 属性名2:属性值2; 属性名3:属性值3; ... 选择器:是用来选择标签的,选出来以后给标签加样式。...代码示例: div{ width:100px; height:100px; background:gold; } 说明 css 是由两个主要的部分构成:选择器和一条或多条样式规则...小结 css 是层叠样式表,它是用来美化网页和控制页面布局的。 定义 css 的语法格式是: 选择器{样式规则}
02-CSS基础选择器 2.1CSS选择器的作用 选择器就是根据不同的需求把不同的标签选出来,这就是选择器的作用。简单来说就是选择标签用的。...2.2选择器的分类 选择器分为基础选择器和复合选择器两大类。...基础选择器是由单个选择器组成的,基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器. 2.3标签选择器 标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的...CSS样式。...HTML中以id属性来设置id选择器,CSS中id选择器以“#id名”来定义。
本文目录 DOM的关系 后代选择器子元素选择器属性选择器伪类选择器参考 元素:标签和内容 关系:父子关系、亲兄弟关系、后代关系。 后代选择器 <!DOCTY...
页面的布局都是CSS+DIV实现的。 p标签前后的内容会换行。 div标签前后的内容会换行;是一个容器,不会改变里面内容的样式;可以放入任何的标签/ 的内容。
1. css 选择器的定义css 选择器是用来选择标签的,选出来以后给标签加样式。2. css 选择器的种类标签选择器类选择器层级选择器(后代选择器)id选择器组选择器伪类选择器3....示例代码 p{ color: red; }hellohello4....开头, 一个类选择器可应用于多个标签上,一个标签上也可以使用多个类选择器,多个类选择器需要使用空格分割,应用灵活,可复用,是css中应用最多的一种选择器。...示例代码 #box{color:red} 这是一个段落标签 <!...小结css 选择器就是用来选择标签设置样式的常用的 css 选择器有六种,分别是:标签选择器类选择器层级选择器(后代选择器)id选择器组选择器伪类选择器
css的三种引入方式行内式内嵌式(内部样式)外链式1....外链式将css代码写在一个单独的.css文件中,在标签中使用标签直接引入该文件到页面中。...示例代码:优点:使得css样式与html页面分离,便于整个页面系统的规划和维护,可重用性高...缺点:css代码由于分离到单独的css文件,容易出现css代码过于集中,若维护不当则极容易造成混乱。...4. css引入方式选择行内式几乎不用内嵌式在学习css样式的阶段使用外链式在公司开发的阶段使用,可以对 css 样式和 html 页面分别进行开发。5.
DOCTYPE html> Css 这是div 这是div 这是span标签 船长公众号 ..." href="css/index.css"> 船长公众号 ..." href="css/index.css"> 船长公众号
css基础 选择器 id选择器 #id值{} 通配符选择器 *{} 群组 选择器1,选择2{} 后代 选择器1
领取专属 10元无门槛券
手把手带您无忧上云