码迷,mamicode.com
首页 > Web开发 > 详细

CSS总结 最后的选择符和字体、元素常见样式

时间:2016-08-11 12:47:35      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:

然后是伪对象选择符,用得比较多的是E:first-letter
例如,想让下列段落的第一个字变大:
<p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是
一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>
则实现的CSS如下:

p:first-letter{font-size: 30px;}

  


若要改变的是第一行的样式,则可以用E:first-line,相信看到这里大家都知道怎么用了,下面是将第一行变成红色字体的CSS代码

p:first-line{color: red;}

  

**首行样式会根据浏览器窗口大小自动调整,永远只让第一行的样式改变
**在CSS3中,中间的:号是两个,即E::first-letter/E::first-line

接下来是属性,首先总结一下字体的样式
总体而言,字体的属性有:
font-family 使用的字体库(如黑体,楷体等)
font-size 字体大小(建议使用px单位)
line-height 行高
font-weight 字体粗细(bold,或者以100位间隔从100到900)
font-style 斜体(normal,italic,oblique.其中italic和oblique效果一样)
color 字体颜色(可以是颜色单词,可以是rbg/rgba,可以是16进制数)
text-decoration 装饰线条(underline,line-through,overline.分别是下划线、上划线、删除线)
text-shadow 文字阴影(必须要有两个px单位设置水平和垂直的偏移距离,另外可以选择模糊程度和颜色)

其中font-family、font-weight、font-style、font-size、line-height可以合在一起写,例如,要设置20px大小,30px行高,加
粗倾斜的黑体字体可以这样设置:
p{font:bold italic 20px/30px "微软雅黑";}
设置颜色为蓝色,带下划线,且带有水平偏移10px,垂直偏移15px,模糊4px,颜色为红色的阴影的字体:

p{
color:blue;
text-decoration: underline;
text-shadow:10px 15px 4px red;
}

 

  

元素样式:
元素一般都有其大小和内容,那么自然少不了内边距、外边距和边框(如p,div,h1等)
width 宽度(单位px或者百分比或者auto,百分比表示与浏览器宽度的比例,auto表示根据内容大小自动调整)
height 高度(同上)
margin 外边距(元素与外部其他元素之间的距离,分上下左右)
padding 内边距(元素与元素内容之间的距离)
opacity 透明度(0.0-1.0之间,小数点前的0可以省略)
border 边框(包括边框宽度border-width、边框颜色border-color、边框形式border-style,可以合在一起写)
background 背景色

**border-style有5种形式,solid实线、dashed虚线、dotted点线、doble双线,默认为none(不显示)

例如,若要将div设置为100px宽度,150px高度,内边距为10px,外边距为15px,透明度为0.4,边框为虚线,边框宽度为2px,边框
颜色为红色,背景色为黄色:

div{
width: 100px;height: 150px;
padding: 10px;margin: 15px;
opacity: .5;
border: 2px dashed red;
background: yellow;
}

  

背景图片我单独拿出来:
background-image:url() 设置背景图片,默认是从左到右平铺
background-repeat 默认是repeat即平铺,一般设置为no-repeat不平铺
background-position 设置图片位置,可以取百分比,数值,位置,百分比是相对于元素的比例,数值相当于坐标位置,
位置可以理解为图片的对齐方式left/right/center和top/bottom
background-size CSS3的新属性,设置图片长、宽大小

例如,设置背景图片为当前目录下的bai.jpg,取消平铺且位置靠右上角,宽度为160px,高度为200px:

background-image: url(bai.jpg);
background-position:right top;
background-repeat: no-repeat;
background-size: 160px 200px;

  

 

CSS总结 最后的选择符和字体、元素常见样式

标签:

原文地址:http://www.cnblogs.com/deoem/p/5760403.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!