你的位置:首页 > 网页设计

[网页设计]CSS(三):基本属性


1.属性选择器

E[att]:选择具有att属性的E元素。

1 /* 获取具有class属性的p元素 */2 p[class]{3   color: red;4 }5 6 <p class="a">class:a</p>

E[att="val"]:选择具有att属性且属性值等于val的E元素。

1 /* 获取class属性的值为"a"的p元素 */2 p[]{3   color: red;4 }5 6 <p class="a">class:a</p>

E[att~="val"]:选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素。

1 /* 获取class属性值里有以空格分隔的"a"的p元素 */2 p[class~="a"]{3   color: red;4 }5 6 <p class="b a c">class:b a c</p>

E[att^="val"]:选择具有att属性且属性值为以val开头的字符串的E元素。

1 /* 获取class属性值以"a"开头的p元素 */2 p[class^="a"]{3   color: red;4 }5 6 <p class="abc">class:abc</p>

E[att$="val"]:选择具有att属性且属性值为以val结尾的字符串的E元素。

1 /* 获取class属性值以"a"结尾的p元素 */2 p[class$="a"]{3   color: red;4 }5 6 <p class="bca">class:bca</p>

E[att*="val"]:选择具有att属性且属性值为包含val的字符串的E元素。

1 /* 获取class属性值包含"b"的p元素 */2 p[class*="b"]{3   color: red;4 }5 6 <p class="abc">class:abc</p>

E[att|="val"]:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

1 /* 获取class属性值以"a"开头并用连接符"-"分隔的字符串的p元素 */2 p[class|="a"]{3   color: red;4 }5 6 <p class="a-bc">class:a-bc</p>

2.CSS属性

  • font-family

font - family属性指定一个元素的字体。

font-family 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。

有两种类型的字体系列名称:

  • family-name - 指定的系列名称:具体字体的名称,比如:"times"、"courier"、"arial"。
  • generic-family - 通常字体系列名称:比如:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace。

使用某种特定的字体系列(Geneva)完全取决于用户机器上该字体系列是否可用;这个属性没有指示任何字体下载。因此,强烈推荐使用一个通用字体系列名作为后路。

注意: 每个值用逗号分开。

1 /* 设置p元素的字体 */2 p{3   font-family:"Times New Roman",Georgia,Serif;4 }5 6 <p>Times New Roman</p>

  • font-size

设置元素的字体大小。注意,实际上它设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮(通常会矮)。浏览器默认的字体大小一般为16px左右。

1 /* 设置p元素的字体大小为16px */2 p{3   font-size: 16px;4 }5 6 <p>font-size: 16px</p>

  • font-weight

设置文本的粗细,可取100~900的整百位的值,数字值 400 相当于 关键字 normal,700 等价于 bold。每个数字值对应的字体加粗必须至少与下一个最小数字一样细,而且至少与下一个最大数字一样粗。

1 /* 设置p元素的字体粗细为"bold" */2 p{3   font-weight: bold;4 }5 6 <p>font-weight: bold</p>

  • font-style

该属性设置使用斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体。理论上讲,用户代理可以根据正常字体计算一个斜体字体。

1 /* 设置p元素的字体为斜体 */2 p{3   font-style: italic;4 }5 6 <p>font-style: italic</p>

  • font

font 简写属性在一个声明中设置所有字体属性。

可设置的属性是(按顺序): "font-style font-variant font-weight font-size/line-height font-family"

font-size和font-family的值是必需的。如果缺少了其他值,默认值将被插入,如果有默认值的话。

注意: line - height属性设置行与行之间的空间。

1 /* 设置p元素的字体为斜体、加粗、大小16px、行高20px、微软雅黑字体 */2 p{3   font: italic bold 16px/20px "微软雅黑";4 }5 6 <p>font: italic bold 16px/20px "微软雅黑"</p>

  • color

color 属性规定文本的颜色。

这个属性设置了一个元素的前景色(在 HTML 表现中,就是元素文本的颜色);光栅图像不受 color 影响。这个颜色还会应用到元素的所有边框,除非被 border-color 或另外某个边框颜色属性覆盖。

1 /* 设置p元素的文字颜色为红色 */2 p{3   color: red;4 }5 6 <p>color: red</p>

  • text-decoration

text-decoration 属性规定添加到文本的修饰。

注释:修饰的颜色由 "color" 属性设置。

这个属性允许对文本设置某种效果,如加下划线。如果后代元素没有自己的装饰,祖先元素上设置的装饰会“延伸”到后代元素中。

1 /* 设置p元素的文字修饰为下划线 */2 p{3   text-decoration: underline;4 }5 6 <p>text-decoration: underline</p>

  • text-shadow

 text-shadow属性连接一个或更多的阴影文本。属性是阴影,指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。

可取值和说明如下:

描述
h-shadow必需。水平阴影的位置。允许负值。
v-shadow      必需。垂直阴影的位置。允许负值。
blur可选。模糊的距离。
color可选。阴影的颜色。

 

 

 

 

 

 

 

1 /* 设置p元素的文字阴影向右和下各偏移3px,模糊距离为2px,颜色为红色 */2 p{3   text-shadow: 3px 3px 2px red;4 }5 6 <p>text-shadow: 3px 3px 2px red</p>

  • width

width 属性设置元素的宽度。

说明:这个属性定义元素内容区的宽度,在内容区外面可以增加内边距、边框和外边距。行内非替换元素会忽略这个属性。

1 /* 设置p元素宽度为100px */2 p{3   width: 100px;4 }5 6 <p>width: 100px</p>

  • height

height 属性设置元素的高度。

1 /* 设置p元素高度为100px */2 p{3   height: 100px;4 }5 6 <p>height: 100px</p>

  • margin 

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值。

取四个值时分别代表:上、右、下、左。

取三个值时分别代表:上、左右、下。

取两个值时分别代表:上下、左右。

1 /* 设置p元素的外边距按上右下左依次为:5px、10px、15px、20px */2 p{3   margin: 5px 10px 15px 20px;4 }5 6 <p>margin: 5px 10px 15px 20px</p>

  • padding

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

padding属性的顺序规则和margin属性一致。

1 /* 设置p元素的内边距按上右下左依次为:5px、10px、15px、20px */2 p{3   padding: 5px 10px 15px 20px;4 }5 6 <p>padding: 5px 10px 15px 20px</p>