个人笔记-CSS

超出容器文字隐藏

.hiddenoverflowtext {
	width:265px;
	line-height:25px;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
	display: inline-block;
}

强制文字（字母数字有时不换行）换行

	text-indent:2em;
	word-break:break-all;
	word-wrap:break-word;

时间： 2024-08-08 13:57:00

个人笔记-CSS的相关文章

HTML+CSS笔记 CSS中级颜色&长度值

颜色值在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色语法: p{color:red;} 2.RGB颜色这个与 photoshop 中的 RGB 颜色是一致的,由 R(red).G(green).B(blue) 三种颜色的比例来配色 p{color:rgb(133,45,200);} 每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数. 每

HTML&CSS设计与构建网站笔记CSS

1.CSS规则如果两个选择器完全相同,后出现的为准越具体的选择器,为准 2.letter-spacing word-spacing 字母间距,单词间距 3.:first-letter :first-line p:first-letter 该p段落的第一个字母 4.[] [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性和值的元素. [attribute~=value] 用于选取属性值中包含指定词汇的元素. [attr

HTML+CSS笔记 CSS进阶再续

CSS的布局模型清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板.如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式. CSS包含3种基本的布局模型,用英文概括为:Flow.Layer 和 Float. 在网页中,元素有三种布局模型:1.流动模型(Flow)2.浮动模型 (Float)3.

HTML+CSS笔记 CSS中级缩写入门

盒子模型代码简写回忆盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左. 语法: margin:10px 15px 12px 14px;/*上设置为10px.右设置为15px.下设置为12px.左设置为14px*/ 通常有三种缩写的方法: 1.如果top.right.bottom.left的值相同, margin:10px 10px 10px 10px; 可缩写为: margin:10px; 2.如果top和

HTML+CSS笔记 CSS进阶续集

元素分类在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<address>.<blockquote> .<form> 常用的内联元素有: <a>.<span>.<br>

HTML+CSS笔记 CSS进阶

文字排版字体我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性. 语法: body{font-family:"宋体";} 这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体.(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体.) 现在一般网页喜欢设置"微软雅黑" 关于字体的问题可以参考阮一峰的经典文章:http://www.ruanyifeng.com/blog/20

HTML+CSS笔记 CSS入门续集

继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代(标签). 语法: p{color:red;} <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩.</p> 上面代码展示了: 某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签. 语法: p{border:1px solid red;} <p&

HTML+CSS笔记 CSS中级一些小技巧

水平居中行内元素的水平居中在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. 语法: <body> <div class="txtCenter">我是文本,哈哈,我想要在父容器中水平居中显示.</div> </body> <style> div.txtCenter{ text-ali

《CSS设计指南》笔记--CSS工作原理

通过阅读和学习书籍<CSS设计指南>总结 <CSS设计指南>/Charles lvyke-Smith著.李松峰译-人民邮电出版社本书网站:http://www.stylinwithcss.com 强烈推荐!!深入浅出,精简,适合入门!! CSS工作原理 2.1 剖析CSS规则 ??规则实际上就是一条完整的CSS指令.规则声明了要修改的元素和要应用给该元素的样式. 2.1.1 为文档添加样式的三种方法 ??有三种方法可以把CSS添加到网页中,分别是写在元素标签里(行内样式),写在&

笔记:css之过渡和动画

一.什么是过渡transition? 1.能够在一定时间内使CSS属性平滑的变化; 2.过渡效果的执行需要一个触发.\ 常用的过渡属性. 1.主要包含: transition:none/all/indent(默认只执行一个为默认属性); 2.transition-duration:过渡持续的时间,默认为0; 3 .transition-timing-function;允许根据时间改变属性变化的速率; 值:(1).ease 逐渐变慢, (2).linear 匀速, (3).ease-in 加速,