网页设计—CSS样式基础

1、CSS样式表

(1)行内式

  行内式也称为内联样式,是通过标记的style属性来设置元素的样式。

  语法格式:<标记名 style="属性1:属性值;属性2:属性值;属性3:属性值;">内容</标记名>

  语法中style是标记的属性,实际上任何HTML标记都拥有style属性,用来设置行内式。

(2)内嵌式

  内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中,并且用<style>标记定义。

  语法格式:<head>

       <style type="text/css">

         选择器{属性1:属性值;属性2:属性值;属性3:属性值;}

       </style>

       </head>

  该语法中<style>标记可以放在HTML文档的任何地方,但是由于浏览器是从上到下解析代码的把CSS代码放在头部便于提前被下载和解析,以避免网页内容下载后没有样式修饰带来的尴尬。

(3)链入式

  链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过<link />标记将外部样式表文件链接到HTML文档中。

  语法格式:<head>

       <link href="CSS文件的路径" type="text/css" rel="stylesheet" />

       </head>

  该语法中,<link />标记必须放在<head>头部中,并且必须设置三个属性:

  href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。

  type:定义所链接文档的类型,指定text/css表示链接的外部文件为CSS样式表。

  rel:定义当前文档与被链接文档之间的关系,指定为stylesheet表示被链接的文档是一个样式表文件。

(4)导入式

  导入式与链入式相同,都是针对外部样式表文件的。对HTML头部文档应用style标记,并在<style>标记内的开头处使用@import语句,即可导入外部样式表文件。

  语法格式:<style type="text/css">

         @import url(css文件路径);或@import "css文件路径";

         /*在此还可以存放其他css样式*/

       </style>

2、CSS基础选择器

(1)标记选择器

  标记选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标记指定统一的css样式。

  语法格式:标记名{属性1:属性值;属性2:属性值;属性3:属性值;}

  用标记选择器定义的样式对页面中该类新的所有标记都有效。

(2)类选择器

  类选择器使用"."进行标识,后面紧跟类名。

  语法格式:.类名{属性1:属性值;属性2:属性值;属性3:属性值;}

  类名即为HTML元素的class属性值,大多数HTML元素都可以定义class属性。优势是可以为元素对象定义单独或相同的样式。

(3)id选择器

  id选择器使用"#"进行标识,后面紧跟id名。

  语法格式:#id名{属性1:属性值;属性2:属性值;属性3:属性值;}

  id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素。

(4)通配符选择器

  通配符选择器使用"*"表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素。

  语法格式:*{属性1:属性值;属性2:属性值;属性3:属性值;}

3、CSS文本相关样式

(1)字体样式属性

  1、font-size(字体大小):设置字号大小

    (1)em:相对于当前对象内文本的字体尺寸           (4)cm:厘米

    (2)px:像素                         (5)mm:毫米

    (3)in:英寸                          (6)pt:点

  2、font-family(字体):设置字体

  3、font-weight(字体粗细):设置字体粗细

    (1)normal:默认值,定义标准字符

    (2)bold:定义粗体字符

    (3)bolder:定义更粗的字符

    (4)lighter:定义更细的字符

    (5)100~900(100的整数倍):定义由细到粗的字符。其中,400等同于normal,700等同于bold,值越大字符越粗。

  4、font-variant(变体):设置字体变化

    (1)normal:默认值,浏览器会显示标准字体

    (2)small-caps:浏览器会显示小型大写的字体

  5、font-style(字体风格):设置字体风格

    (1)normal:默认值,浏览器会显示标准字体样式

    (2)italic:浏览器会显示斜体的字体样式

    (3)oblique:浏览器会显示倾斜的字体样式

  6、font(综合设置字体样式):对字体样式综合设置

    格式:选择器{font: font-style font-variant font-weight font-size/line-height font-family;}

    不需要的属性可以省略,但必须保留font-size和font-family属性,否则font属性将失效。

(2)CSS文本外观属性

  1、color(文本颜色):定义文本的颜色

  2、letter-spacing(字间距):定义字间距

  3、word-spacing(单词间距):定义英文单词间距,对中文字符无效。

  4、line-height(行间距):设置行间距

    (1)px:像素    (2)em:相对值    (3)%:百分比

  5、text-transform(文本转换):控制英文字符的大小写

    (1)none:不转换(默认值)

    (2)capitalize:首字母大写

    (3)uppercase:全部字符转换为大写

    (4)lowercase:全部字符转换为小写

  6、text-decoration(文本装饰):设置文本的装饰效果

    (1)none:没有装饰(正常文本的默认值)

    (2)underline:下画线

    (3)overline:上画线

    (4)line-through:删除线

  7、text-align(水平对齐方式):设置文本内容的水平对齐

    (1)left:左对齐    (2)right:右对齐    (3)center:居中对齐

  8、text-indent(首行缩进):设置首行文本的缩进(允许使用负值),属性值可以用不同单位的数值

    (1)em:字符宽度的倍数    (2)%:相对于浏览器窗口宽度的百分比

  9、white-space(空白符处理):设置空白符的处理方式

    (1)normal:常规(默认值),文本中的空格、空行无效,满行后自动换行

    (2)pre:预格式化,按文档的书写格式保留空格、空行原样显示

    (3)nowrap:空格空行无效,强制文本不能换行,除非遇到换行标记<br />。内容超出边界也不换行,若超出浏览器页面则自动增加滚动条

4、CSS样式高级特性

  (1)标签指定式选择器

    标签指定式选择器又称交集选择器,由两个选择器构成,第一个为标记选择器,第二个为class选择器或id选择器,两个选择器之间不能有空格

  (2)后代选择器

    后代选择器用来选择元素或元素组的后代,写法为把外层标记写在前面,内层标记写在后面,中间用空格隔开。只适用于嵌套情况。

  (3)并集选择器

    并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器都可以作为并集选择器的一部分。

时间: 2024-10-17 14:28:28

网页设计—CSS样式基础的相关文章

HTML CSS样式基础

一.css 1.什么是css? Cascading Style Sheet 级联样式表 改变样式的一个工具,说白了,就是为了让我们的页面好看, HTML底层封装了css这样一个工具. 2.怎么使用css a.style 风格.样式 这个关键词写到标签内部,可以修改标签的样式 注意:写在标签内部!也就是>里面 3.css样式,分为三种 a.行内样式表 <p style="color:#0FC">111111111111</p> 其中:style="

HTML静态网页(css样式表)美化

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p >内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style type="text/css"> p   //格式对p标签起作用 { 样式: } </sty

HTML静态网页(css样式表)

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style type="text/css">

HTML控件元素和css样式基础理解

HTML (超文本标记语言) 1.该语言用于编写超文本文档,并在含有浏览器软件的设备上显示,超文本文档指集视频.音频.超链接.文本.图像.图片等多媒体信息为一体的文档. 标签元素(控件元素)  1.标签分为行内标签和块级标签,行内标签有small(文本字体小化). big(文本字体大化). address(文本地址样式化) .img(加载图片元素) .a(加载链接)等等. 块级标签有div(块级元素).ul(列表父元素).li(列表子元素) .p(文本)等等.区别就在浏览器中的呈现效果. 2.每

css样式基础详解

一.字体属性:(font) 1.大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 2.样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 3.行高 {line-height: normal;}(正常) 单位:PX.PD.EM 4.粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常) 5.变体 {fon

CSS样式基础2

CSS: 一.常用样式:字体,颜色,背景 二.布局:浮动  定位  标签特性 三.标签盒子模型: 边距  边框 四.动画:旋转 渐变 注意:子标签会继承父标签的样式但不是所有的样式都会被继承. 1.1.文本字体 ①文本颜色 h1 {color:#ccc;} ②文本对齐方式 h1 {text-align:center;} h2 {text-align:right;} h3 {text-align:justify;} justify(每一行被展开为宽度相等,左,右外边距是对齐) ③文本修饰 h1 {

css样式基础三

css的定位: 其中css中被分为块级元素与行内元素.如块级元素div.hx标签.p元素.行内元素span和strong W3school给出的一切皆为框的定义. 而且可以使用display属性,强行将行内元素变为块级元素.如display:block. CSS的定位机制: 主要分为三类: 普通流.浮动.和绝对定位. position属性 static元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中. relative元素框偏移某个距离.

Css样式基础

1.Css的语法 CSS的语法主要由两个部分组成,一个是选择器,一个是属性. 选择器又分为以下几种: 1.元素选择器:即Html标签去掉括号的就是元素 2.类选择器:所谓的类就是说class=“名称”,类的名称是可以相同,也可以不同.调用的时候类名前面要加“.” 3.id选择器:名称不能相同,具有唯一性.主要用于后台交互.调用是id的名称前要加“#”. 4.伪类:语法为selector : pseudo-class {property: value} 主要运用为: a:link {color:

前端开发css样式基础篇

楼主比较懒,这个是看到别人写的 直接拷贝回来 尊重原著.http://www.cnblogs.com/iflygofy/archive/2016/08/01/5726479.html 里面有一些自己加上去的注释.. 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间一般都用16进制表示颜色 单位 px:像素,与分辨率设置相关. %相对于浏览器的百分之多少,可以对宽度width做