首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端基础篇css

html相关概念 1.html—超文本标记语言 2.xhtml—可扩展文本标记语言 3.html5—html第五次重大修改 注:htmlxhtml区别 xhtml相对于html4.0并没有增加新标签...DOCTYPE html> 2.网页根标签(根元素):… 所有网页内容及标签都要放置html标签之间 3.html内容分为两大部分:head部分body部分 a)head...12px,行高为字体大小1.5倍,字体类型为微软雅黑 注:font复合写法,sizefamily不可互换位置,也不可以其他简写属性互换位置 7.字体颜色 语法:color:颜色值; 注:颜色值三种写法...,可以实现单行文本定高容器垂直居中 b) line-height不允许设置负值 c) line-height属性值只写数值不加单位时,代表行高为字体大小多少倍 3.文本修饰 语法:text-decoration...区域 IV.当需要调整子元素元素位置关系时,可以通过给元素设置padding来实现 容器溢出 一、容器溢出 语法:overflow:visible|hidden|scroll|auto|inherit

1.7K30

前端入门学习--CSS

样式表定义如何显示 HTML 元素,就像 HTML 3.2 字体标签颜色属性所起作用那样。样式通常保存在外部 .css 文件。...无法调整文本问题,许多开发者使用 em 单位代替像素。...em尺寸单位由W3C建议。 1em当前字体大小相等。浏览器默认文字大小是16px。 因此,1em默认大小是16px。...但是目前最好解决方案是回避这个问题。也就是,不要给元素添加具有指定宽度内边距,而是尝试将内边距或外边距添加到元素元素子元素。 IE8 及更早IE版本不支持设置填充宽度边框宽度属性。... CSS 属性 选择器 具有特定属性HTML元素样式 具有特定属性HTML元素样式不仅仅是classid。 注意:IE7IE8需声明!

27.6K20
您找到你想要的搜索结果了吗?
是的
没有找到

CSS笔记

) text-align:文字对齐方式(left左,right右,center居中,justify两端对齐) text-indent:段落缩进 line-height:调整行高 text-transform...padding-(top,right,bottom,left)(内边距) - 清除内容周围区域,内边距是透明。 content(内容) - 盒子内容,显示文本图像。...:hidden 隐藏元素仍需占用与隐藏之前一样空间 定位 postion: absolute(绝对定位),其位置相对于最近已定位元素,如果元素没有已定位元素那么它位置相对于 static...sticky(粘性定位),基于用户滚动位置来定位,滚动出目标区域时,它行为就像position:relative;它表现就像 position:fixed;,它会固定在目标位置。...left right none 布局-水平&垂直对齐 要水平居中对齐一个元素(如 ), 可以使用 margin: auto; 文本元素内居中对齐,可以使用 text-align: center; 导航栏

1.9K20

Web 隐藏技术:几隐藏 Web 元素方法及优缺点

元素是可见,但仅对屏幕阅读器隐藏。 在这篇文章,我们将学习htmlcss隐藏元素,并涵盖易访问性、动画隐藏用例等方面,让我们开始吧。...请参见下图: image.png 注意,当蓝皮书被隐藏时,它已被完全从堆栈删除。为它保留空间已经消失了。同样概念也适用于HTML隐藏元素时。...当在元素上使用visibility: hidden时,所有内容都是隐藏,但是当该元素子元素具有visibility: visible时,将显示该子元素。...在下面的GIF,我有如下clip-path: image.png 将每个方向多边形值设置为0 0,则裁剪区域大小将调整为0。结果,图像将不会显示。...字体大小 此外,将字体大小设置为0也很有用,因为这会在视觉上隐藏文本

5K30

Css学习手册之基本篇

几种css使用姿势 主要有下面三个使用姿势,其中优先级为 c > b > a a.直接引入css文件 b.html,直接写css: c.标签中直接写css 标签。 5....列表 html,列表主要是 : li, ul, ol 等 默认 ol 是以数字排序; ul 是以符号排序; li 为列表内元素标签 用较多属性 list-style-type: 设置列表项标志类型...absolute 绝对定位元素位置相对于最近已定位元素,如果元素没有已定位元素,那么它位置相对于 如一个测试 h2 { position:absolute;...center 通常是对于文本对其方式,比如一个标签块内文本如何对齐,靠左,靠右还是居中 margin: auto 标签对齐方式,如希望一个div标签水平居中,就可以这么玩 图片需要居中对齐

1.8K60

【FE前端学习】第二阶段任务-基础

标记标签是用尖括号包围关键词,以开始标签结束标签成对存在,如 HTML属性,给元素提供了更多信息,开始标签以名称/值形式出现,如下例href属性 ),这是因为浏览器会误认为它们是标签。...;} 字体大小 h1 {font-size:60px;} 1em=元素字体大小 h1 {font-size:3.75em;} 所有字体属性一个声明里,其中30px表示line-height行高...设置左右对齐 position:absolute; right:0px; float设置左右对齐 float:right; 属性 描述 clear 设置一个元素侧面是否允许其他浮动元素。...HTML 元素选取操作 text() - 设置或返回所选元素文本内容 html() - 设置或返回所选元素内容(包括 HTML 标记) val() - 设置或返回表单字段值 attr() 方法用于获取属性值

5.1K10

【学习笔记】CSS3

CSS3 说明 此笔记为本人学习遇见狂神说教程学习笔记,侵删。 快速入门 html文件 <!...内容表现分离 网页结构表现统一,可以实现复用 样式十分丰富 建议使用独立于htmlcss文件 利用SEO,容易被搜索引擎收录!...img需要放在div) margin是顺时针,只有两个时,是上下左右 margin: 0 auto margin+border+padding+内容宽度 圆角边框 左上开始顺时针方向 貌似就顺着填...="clear"> .clear{ clear: both; margin: 0; padding: 0; } overflow 级元素增加一个 overflow...绝对定位 仍然基于xx定位 position: absolution 没有级元素定位前提下,相对浏览器定位 级元素存在定位,会相对于级元素进行偏移 级元素范围内移动(好像可以出去?)

62530

提升网站可访问性CSS实践方法

使用可调整字体大小单位可以让用户根据自己喜好需求来调整字体大小,提高可读性。...以下是一些CSS实践方法: 1、使用相对单位 rem 或 em 来指定字体大小,这些单位可以根据元素或根元素字体大小进行缩放。...@media screen and (max-width: 768px) {     body {         font-size: 14px;     } } 四、使用适当语言声明 HTML文档添加正确语言声明可以让屏幕阅读器更容易识别文本内容发音...六、使用适当语义化HTML标记 适当地使用 HTML 标记可以让网站更具有语义性可访问性,并且能够帮助搜索引擎更好地索引网站内容。...以下是一些常用HTML标记和它们语义含义: :用于定义导航链接标记。 :用于定义一篇文章或一个独立内容区域标记

20030

Windows 8.1 应用再出发 - 几种常用控件

本篇为大家简单介绍Windows 商店应用控件用法,为方便讲解,我们文本控件按钮控件这两类中分别挑选有代表性控件进行详细说明。 1....文本控件 (1) TextBlock     TextBlock是最常用文本显示控件,重点关注以下属性: CharacterSpacing  字符之前统一间距,间距 = 字体大小 / 1000。...OpticalMarginAlignment  枚举值,指定在与文本容器边界对齐如何处理每个字符版式靠边值。有None(默认值) TrimSideBearings 两种。...来替代剩余文本,Clip:像素级别修整文本,并以可视方式裁剪多余字形,None:不休整文本,WordEllipsis:单词边界处修整文本。将绘制省略号 (...) 来替代剩余文本。...Center:与元素布局中心对齐元素,Left:与元素布局左侧对齐元素,Right:与元素布局右侧对齐元素,Stretch:拉伸以填充整个元素布局槽元素。

2.2K40

前端(二)-CSS

val] 选择具有属性attr元素,且属性值以val结尾元素 E[attr*val] 选择具有属性attr元素,且属性值包含val元素 3、美化网页元素 3.1 dispaly 行内元素与块元素切换...,还是象标准 HTML 那样分开显示。...:margin:0px auto; 网页居中对齐条件:1.块元素 2.固定宽度 4.3.3 padding 内边距 padding-left padding-right padding-top...1.设置相对定位盒子会相对它原来位置,通过指定偏移,到达新位置 ; 2.设置相对定位盒子仍在标准文档流,它对级盒子相邻盒子都没有任何影响 ; 3.设置相对定位盒子原来位置会被保留下来...; 宽度自适应,可以决绝窗口缩放展示错乱(用在头部导航栏等) border: 0px none; 剔除边框(常用去掉input边框) outline: none; 去除选中文本样式(常用去掉,点击输入框时边框变蓝

1.8K20

Web前端温故知新-CSS基础

1.1 CSS定义   全名:Cascading Style Sheets -> 层叠样式表   定义:CSS成为层叠样式表,它主要用于设置HTML页面文本内容(字体、大小、对齐方式等)、图片外形...(2)继承性   所谓继承性是指写css样式表时,子标记会继承标记某些样式,例如文本颜色字号。想要设置一个可继承属性,只需要将它应用于元素即可。   ...例如,字体、字号、颜色、行距等可以body元素中统一设置,然后通过继承影响文档所有文本。...Display属性   (1)标签类型   HTML标记一般分为 块标记 行内标记 两种类型,它们也称为 块元素 行内元素。...行内元素:行内元素不会占有独立区域,仅仅依靠自身字体大小图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本样式。

3.5K40

Web前端温故知新-CSS基础

(2)继承性   所谓继承性是指写css样式表时,子标记会继承标记某些样式,例如文本颜色字号。想要设置一个可继承属性,只需要将它应用于元素即可。   ...例如,字体、字号、颜色、行距等可以body元素中统一设置,然后通过继承影响文档所有文本。...important命令,该命令被赋予最大优先级,也就是说不管权重如何以及样式位置远近,!important都具有最大优先级。...Display属性   (1)标签类型   HTML标记一般分为 块标记 行内标记 两种类型,它们也称为 块元素 行内元素。...行内元素:行内元素不会占有独立区域,仅仅依靠自身字体大小图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本样式。

2.3K20

重温前端-css篇

例如通过伪元素您可以设置段落第一个字母样式,或者元素之前、之后插入一些内容等等。 CSS1 CSS2 ,伪元素使用与伪类相同,都是使一个冒号:与选择器相连。...} 6、固定定位 position:fixed 7、CSS单位(一) emrem 简单说 em: 就是字体大小,根据元素自身字体大小来定,如果自身没有定义字体大小,则继承元素字体大小,即1em...= 1 font-size; rem: em差不多,可以看成是root-em,是根据根元素字体大小来定义,即html设置字体大小来定义,默认html字体大小是16px; 8、继承相关 css...无继承性属性 1、display:规定元素应该生成类型 2、文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本装饰 text-shadow:...也就是说html源⽂件是看不到伪类伪元素。 伪类其实就是基于普通DOM元素⽽产⽣不同状态,他是DOM元素某⼀特征。

81530

《精通CSS》第4章 网页排版

垂直对齐 垂直对齐vertical-align默认值是基线对齐baseline,即子元素基线与元素基线对齐。...关键字bolderlighter是继承值基础上把文本变得更粗或更细。...通过细微调节,可以让两种字体切换时闪烁感降到最低,如将行高调整一致,对于 x 高度不一致字体调整字体大小等。 4.5 高级排版特性:OpenType 前面我们知道了如何使用更丰富字体。...在有些 OpenType 字体格式中支持字体文件包含字体额外设定特性,包括连字(ligature,由字符组合而成特殊字形,如“fi”或“ffl” ),字距(kerning,调整特定字母组合间距),...文本段落“老式”数字风格小写字母搭配更合适;“表格数字”表格里费用清单里排列得更整齐;而“线性”数字单独使用或与大写单词搭配使用显得更为统一。分别如下面两图所示。 ?

1.4K20

最新最全自己动手做一个富文本编辑器(附源码 api)

(IE浏览器不支持) defaultParagraphSeparator: 更改在可编辑文本区域中创建新段落时使用段落分隔符。有关更多详细信息,请参阅标记生成差异。...enableInlineTableEditing: 启用或禁用表格行列插入删除控件。(IE浏览器不支持) enableObjectResizing: 启用或禁用图像其他对象大小可调整大小手柄。...fontSize: 插入点或者选中文字部分修改字体大小. 需要提供一个HTML字体尺寸 (1-7) 作为参数。 foreColor: 插入点或者选中文字部分修改字体颜色....(IE浏览器不支持) insertHorizontalRule: 插入点插入一个水平线(删除选中部分) insertHTML: 插入点插入一个HTML字符串(删除选中部分)。...insertParagraph: 选择或当前行周围插入一个段落。(IE会在插入点插入一个段落并删除选中部分.) insertText: 光标插入位置插入文本内容或者覆盖所选文本内容。

2.4K20

CSS-02

# 行内元素(inline-level) 行内元素(内联元素)不占有独立区域,仅仅靠自身字体大小图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本样式。...我们平时用cover 最多 c) 设置为contain会自动调整缩放比例,保证图片始终完整显示背景区域。...标记是实心圆。 circle 标记是空心圆。 square 标记是实心方块 # list-style-position 值 描述 inside 列表项目标记放置文本以内,且环绕文本根据标记对齐。...保持标记位于文本左侧,列表项目标记放置文本以外,且环绕文本不根据标记对齐。 # list-style-image 值 描述 URL 图像路径。 none 默认。无图形被显示。 <!...# CSS继承性 所谓继承性是指书写CSS样式表时,子标签会继承标签某些样式,如文本颜色字号。想要设置一个可继承属性,只需将它应用于元素即可。 注意: 1.

2K30
领券