`

CSS设置精选版(基础一)

    博客分类:
  • css
阅读更多

1、定义虚线并且指定颜色的边框

border: 1px dotted #000;

 

2、选择器(元素基于类)

td.fancy {}  注意:元素和类名之间没有空格

html中表示为:<td class="fancy">

 

4、指定背景图片:

background-image: url(/i/eg_bg_03.gif);

  4.1 图片平铺

background-repeat: repeat-y;  或 background-repeat: repeat-x;  或 background-repeat: repeat-y repeat-x;  或  background-repeat: no-repeat;  

  4.2 图片定位

background-position:

取值范围:top center bottom right center left

或  100px  50px

当定位为数值时,即图片的偏移量, 第一个值为左上角向右的偏移量,第二值为左上角向下的偏移量。

例:background-position:  right top

  4.3 图象滚动

当文字超出一屏时,滚动时只滚动文字,图片仍然为背景。

background-attachment:fixed   //默认值 scroll

  4.4 将以上属性设置在一个声明中

background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;

 

5、direction 设置元素内容方向。

(direction: rtl  或  direction: ltr)

 

6、文本相关设置:

  6.1 设置行高: line-height 。

  6.2 设置字符间距: letter-spacing 。

  6.3 对齐元素中的文本: text-align 。 (left  center  right)

  6.4 给文本加 上划线 横线(删除线) 下划线 无线

text-decoration: (overline  line-through  underline  none)

 6.5 首先缩进 text-indent: 1cm

 6.6 控制英文单词全部大写 小写 首字母大小

text-transform: (uppercase  lowercase  capitalize )

 6.7 控制文本不换行等设置

white-space: (normal  pre  nowrap)

normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

 6.8 设置字体系列: font-family 。(font-family: Georgia, serif;)

 6.9 设置字体风格: font-style 。(font-style: normal;  或 font-style: italic )

 6.10 设置字体粗细: font-weight,取值:

值 描述
normal 默认。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。

 6.11 将所有属性应用于一个font设置中

font: italic small-caps 900 18px arial

 

7、文本过长时,显示省略号(只支持中文,且IE)

width:45px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;

分享到:
评论

相关推荐

    上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合

    【CSS基础学习】是网页设计领域中的重要环节,它是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。CSS(层叠样式表)让网页设计者能够分离内容与表现,使得网页设计更加灵活且易于...

    css样式基础版

    css样式,很好用好,很不错,可以试试

    (完整版)《HTML5+CSS3网站设计基础教程》_教学大纲.pdf

    三、CSS3 样式基础知识点 * CSS3 选择器 * CSS3 属性 * CSS3 值 * CSS3 单位 * CSS3 颜色 * CSS3 文本样式 * CSS3 字体样式 * CSS3 背景样式 * CSS3 边框样式 * CSS3 盒模型 * CSS3 布局样式 四、网页布局与变形...

    DIV+CSS教程——第一天XHTML_CSS基础知识

    DIV+CSS教程——第一天XHTML_CSS基础知识

    HTML5与CSS3基础教程 第八版 中文版 高清 PDF

    在这一版中,HTML5引入了许多新的元素,如`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;section&gt;`、`&lt;article&gt;`等,这些元素使得网页结构更加清晰,更利于搜索引擎优化(SEO)。此外,HTML5还强化了对多媒体的支持,例如 `&lt;audio&gt;` 和 `...

    HTML5+CSS3网站设计基础教程(第2版)_源代码.zip

    总的来说,"HTML5+CSS3网站设计基础教程(第2版)"是一个全面且深入的学习资源,它将帮助初学者和进阶者提升网页设计技能,掌握现代网页开发的最新技术。通过实践教程中的源代码,学习者不仅可以深化理论理解,还能...

    Html5+Css3网页设计基础 第三版 源代码

    在《HTML5与CSS3网页设计基础 第三版》中,作者Terry Felke-Morris深入浅出地讲解了这两门技术的基础知识,适合初学者入门。这本书的源代码分享可以帮助读者更好地理解和实践书中所讲内容。 HTML5的新特性包括: 1....

    HTML5+CSS3网站设计基础教程_动手实践源代码

    总的来说,"HTML5+CSS3网站设计基础教程_动手实践源代码"是一个全面且实用的学习资源,无论你是网页设计新手还是希望更新技能的开发者,都能从中获益匪浅。通过深入学习和实践,你将能够创建出美观、功能强大且适应...

    《HTML5+CSS3网站设计基础教程》源代码+补充案例+动手实践

    《HTML5+CSS3网站设计基础教程》是一本旨在教授读者如何使用现代Web技术构建交互式、响应式网站的教材。源代码、补充案例和动手实践环节是学习过程中的重要组成部分,它们帮助理论知识与实际操作相结合,使学习更加...

    CSS基础教程PDF

    ### CSS基础教程知识点详解 #### 一、CSS简介 **CSS**,全称为 **Cascading Style Sheets**(级联样式表),是一种用于定义HTML文档布局的语言。它可以帮助开发者更好地控制网页的外观,如字体、颜色、间距、大小...

    CSS基础学习源码

    本“CSS基础学习源码”是一个适合初学者的资源包,提供了丰富的实践材料,帮助理解并掌握CSS的基础知识。 首先,我们来详细探讨CSS的基础概念: 1. **选择器与声明**:CSS的核心在于选择器和声明。选择器用于定位...

    精通CSS 第三版

    《精通CSS 第三版》是一本专为想要深入理解CSS技术的读者精心编写的书籍。CSS,即层叠样式表(Cascading Style Sheets),是网页设计中的核心技术,用于控制网页元素的布局、颜色、字体等视觉表现。本书作为第三版,...

    div+css基础

    ### div+css基础知识点 #### CSS简介 - **定义**:CSS全称为Cascading Style Sheets,即级联样式表,是一种用来描述HTML文档外观和格式的语言。 - **作用**:CSS主要用于控制网页布局和样式设计,使得网页更加美观...

    [CSS] CSS 基础教程 英文版

    [SitePoint] CSS 基础教程 英文版 [SitePoint] Jump Start CSS E Book ☆ 图书概要:☆ This short SitePoint book provides readers with a fun and yet practical introduction to Cascading Style Sheets ...

    HTML5+CSS3网页设计基础教程教学课件汇总完整版电子教案.pptx

    HTML5+CSS3网页设计基础教程教学课件汇总完整版电子教案.pptx

    《HTML5+CSS3网站设计基础教程》 PPT

    “第3章CSS3入门.pptx”和“第4章CSS3选择器.pptx”将引导你了解CSS3的基础语法和高级选择器,如伪类(:hover、:active、:focus等)、子元素选择器(&gt;:child)、相邻兄弟选择器(+)等,这些工具可以帮助你更精确地...

    HTML5+CSS3网站设计基础教程 源代码.rar

    HTML5和CSS3是现代网页设计的基石,它们极大地提升了网页的交互性和视觉表现力。在"HTML5+CSS3网站设计...实践这些源代码和练习,将有助于你巩固理论知识,提升实际操作技能,为成为一名优秀的Web开发者奠定坚实基础。

    html + css 基础学习.zip

    html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css...

    HTML5+CSS3网站设计基础教程_动手实践源代码.zip

    3. 掌握CSS3的选择器,为不同类型的元素设置不同的样式。 4. 应用CSS3的样式属性,如边框、背景、文本效果、转换、动画等,来增强视觉吸引力。 5. 学习使用Flexbox或Grid进行响应式布局,适应不同设备和屏幕尺寸。 6...

Global site tag (gtag.js) - Google Analytics