CSS基础--常用样式】的更多相关文章

一.背景相关 背景颜色 background-color :颜色名称/rgb值/十六进制值 背景图片 background-image :url('') 背景图片平铺方式 background-repeat : repeat-x(仅水平重复) repeat-y(仅垂直重复) no-repeat(不重复) 设置背景图片位置 background-position : 数字+单位/center/top/bottom/left/right 同上. 例如:50px 50px 背景图片是否滚动 backg…
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis; 2.设置溢出文本显示为省略标记: text-overflow:ellipsis; (注:text-overflow:clip | ellipsis | ellipsis-word;…
属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val"] E[att*="val"] E[att|="val"] 伪对象选择符  E:first-letter/E::first-letter 设置对象内的第一个字符的样式. <p>今天,阳光明媚,晴空万里,非常适合户外活动,如踏青.远足之类的.长期坐…
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE10以上不支持. 如果你安装了多个IE,条件注释将会以最高版本的IE为标准. 条件注释的基本结构和HTML的注释(<!– –>)是一样的.因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们. IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释…
上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1  浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和绝对定位已经说完,接下来就是浮动了. 什么是浮动? CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. 我的理解是:浮动将元素‘上浮’一层,并保留元素在上层对下层的投影的位置. 请注意: 元素的水平方向浮动,意味着元素只能左右移动而不能上下移动. 一个浮动元素会尽量向…
HTML&CSS基础-常用选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常用选择器</title> <style type="text/css"> /* * * 元素选择器: * 作用: * 通过元素选择器可以…
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低的.而CSS可以分别为网页的各个层次设置样式. 书写的位置: 1.内联样式:可以将css样式表书写到元素(标签)的style属性中,只对当前标签中的内容起作用,不方便复用.属于结构与表现耦合,不推荐使用. 2.内部样式:可以将css样式编写的head中style标签中,然后通过css选择器…
CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网页表现与结构分离的一种样式设计语言.样式通常存储在样式表中,外部样式表通常存储在 CSS 文件中,多个样式定义可层叠为一. HTML 标签被设计为用于定义文…
1  背景相关 背景颜色 background-color     = 颜色名称/rgb值/十六进制值 背景图片 background-image = url('') 背景图片平铺方式 background-repeat   = repeat-x(仅水平平铺)  repeat-y(仅垂直平铺)  no-repeat(不平铺) 设置背景图片位置 background-position = 数字+单位/center/top/bottom/left/right   同上.  例如:50px 50px…
1.背景与前景:background-color::背景色,样式表优先级高. background-image:url(路径):设置背景图片 background-attachment:fixed:背景固定,不随字体滚动.scroll:背景随字体滚动. background-repeat:no-repeat:不平铺.repeat:平铺.repeat-x:横向平铺.repeat-y:纵向平铺. background-position:center 背景图居中,设置背景图时,top 上,left 左…
限制行数溢出省略号 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ; overflow: hidden; 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. overflow: hidden; text-overflow:ellipsis; white-space: nowrap;…
本篇主要介绍css的常用样式,以及网页布局相关知识.绝对定位和相对定位,盒子模型.css权重.以及css选择器: 绪论:CSS基本介绍 为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表.有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁. 例如你看到有样式的搜索框可能是这样的: 而没有样式…
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间一般都用16进制表示颜色 单位 px:像素,与分辨率设置相关. %相对于浏览器的百分之多少,可以对宽度width做设置,不可以对height做设置 文本样式(text) color:设置文本颜色 text-align:设置文本对齐方式 center left right letter-spa…
css基础:base /* * 初始化 */ *::after, *::before { box-sizing: border-box; } body { font-family: 'Microsoft YaHei', tahoma, arial, 'Hiragino Sans GB', \5b8b\4f53, sans-serif; background: #fff; } html{ -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 1…
# CSS三种引入方式 ## 一.三种方式的书写规范 #### 1.行间式 ```html<div style="width: 100px; height: 100px; background-color: red"></div>``` #### 2.内联式 ```html<head> <style> div { width: 100px; height: 100px; background-color: red; } </styl…
一.HTML页面结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>这是页面的标题!</title> </head> <body> 这是页面的主体! </body> </html> <!DOCTYPE>: 该标签位于html文档顶部,用于告诉浏览器,本页面文档使用的是哪种HTML…
常用样式制作思路   学习常用样式总结参考来自这里 带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>图文列表</title> 6 <style type="text/css"> 7 li{list-style-ty…
CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>行间式</title> </head> <body> <!-- 1.在标签头部的style标签内 --> <!-- 2.属性值满足CSS语法 --> <!…
css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> : link ->:hover-> :active 选择器的优先级: id选择器>class选择器>标签选择器 如果设置了同样的类样式,类样式与元素里类的顺序没…
---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在style标签中. <style>       color: red;  设置文本颜色 font-size: 30px; 设置文本大小 设置背景颜色 background-color: blue; font-weight: bold; 设置文本粗体 font-style: italic; 设置文本斜体…
CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言.相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示…
上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观. animation animation的实现需要通过keyframes来实现.keyframes(关键帧),类似于flash当中的关键帧.关键帧有其自己的语法规则,他的命名是由"@keyframes"开头,后面紧接着是这个“动画的名称”加上一对花括号“{}”,括号中就是一些不同时间段样…
1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p></div> -- 对 <a href="#"><span></span></a> -- 对 <span><div></div></span> -- 不合理 2. 块级元素不能…
css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高度*/: 48px; border/*边框*/:1px solid red; font-size/*字体大小*/: 26px; text-align/*左右居中*/: center; line-height/*根据标签高度自适应垂直居中*/: 48px; font-weight/*加粗*/: bol…
CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; } </style> <div id="user"></div> (2)( class ) 类选择器 :  .        => 标签拥有 class="user" 属性 <style> .user { widt…
一:长度及颜色单位   长度单位       px(像素)        in(英寸)       pt(点),一个标准的长度单位,1pt = 1/72in       mm(毫米)       cm(厘米)       em(长度),相当于长度,1em = 16px       rem()         vw(百分比)        vh()        cm em vw vh流失布局范畴(可能有错别字,先了解,在后面的课程会讲到) width: 100px; /*width: 10in;…
认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 如下列代码: p{ font-size:12px; color:red; font-weight:bold; } 使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体.字号或者颜色等. CSS代码语法 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示:…
amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素的盒模型设置为 border-box    -moz-box-sizing: border-box; 3.em和px:根据字号做相应变化的场景也使用了 em,需要像素级别精确的场景也使用了 px 4.字号设置:Amaze UI 将浏览器的基准字号设置为 62.5%,也就是 10px,现在 1rem…
CSS文字,文本常用样式 字体属性 font-family 如果电脑没有第一个字体,就切换到下一个 body { font-family: Microsoft YaHei,Helvetica,Arial,sans-serif; } font-size 字体大小 浏览器字体默认大小一般16px px是绝对大小,不会随浏览器变化变化 em相对单位 rem主要应用移动端 color 三种颜色表示 color:rgb();0-255 10进制 color:red; color:#000000;16进制表…
一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 CSS :构建HTML元素的样式 样式汇总: color:red 字体颜色 font-size:字体大小 font-family:字体样式 background-color 背景颜色 width:宽度 height:高度 字体使用实例(样式) font-family:字体的种类 font-size:字…