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

然后是伪对象选择符,用得比较多的是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;

  

时间: 2024-11-08 15:52:52

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

css hover对其包含的元素进行样式设置

<ul class="icon-down-single-arr-li"> <li> <a href="javascript:void(0)">价格<span class="icon-all icon-down-single-arr"></span></a> </li> </ul> 对a链接包含的span图标进行样式更改. .icon-down-sing

css hover对其包括的元素进行样式设置

<ul class="icon-down-single-arr-li"> <li> <a href="javascript:void(0)">价格<span class="icon-all icon-down-single-arr"></span></a> </li> </ul> 对a链接包括的span图标进行样式更改. .icon-down-sing

jQuery使用之(二)设置元素的样式

css是页面不能分隔的部分,jQuery中也提供了一些css相关的实用的办法.前面章节中有使用过 addClass()为元素添加css样式风格.本节主要介绍jQuery如何设置页面的样式风格.包括添加.删除.动态切换等. 1. 添加.删除css类别. $(function() { //同时添加多个CSS类别 $("img").addClass("css1 css2"); }); 如以上代码对img元素添加了css1和 css2两个样式 removeClass与add

CSS 组合选择符:后代选择器、子元素选择器、相邻兄弟选择器、普通兄弟选择器

CSS 组合选择符 CSS 组合选择符 在 CSS3 中包含了四种组合方式:CSS组合选择符包括各种简单选择符的组合方式. 后代选择器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔) 后代选择器 后代选择器用于选取某元素的后代元素. 以下实例选取所有 <p> 元素插入到 <div> 元素中: 实例 divp{background-color:yellow; } 子元素选择器 与后代选择器相比,子元素选择器(Child sel

CSS高级选择符

2016-11-07 <css入门经典>第八章 1.属性选择器 选择器 描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性和值的元素. [attribute~=value] 用于选取属性值中包含指定词汇的元素. [attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词. [attribute^=value] 匹配属性值以指定值开头的每个元素. [attribute$=value] 匹配属性

一天一点css 2 选择符语法

css用于控制元素样式,css语法为 选择符{属性:值}方式进行设置 1 类型选择符 就是将标签作为选择符,如body div h1 span等 2 群组选择符 如 h1,h2h3{padding:5px;}中间使用,分隔符,由多个选择符组成,表示这一组选择符均采用一致样式 3 包含选择符 包含主要用于父级内部字集节点的设置,就像xpath路径一样,语法为选择符之间使用 空格作为分隔符 如 h1 span{font-weight:bold} 意思是h1内部所有span节点使用字体加粗样式 4 i

css中伪类和伪元素的区别

转载:http://www.cnblogs.com/ihardcoder/p/5294927.html CSS3伪类和伪元素的特性和区别 前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念,CSS1和CSS2中对伪类的伪元素的区别比较模糊,甚至经常有同行将:before.:after称为伪类.CSS3

关于css中伪类及伪元素的总结

css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有“段落的第一行”.“文章首字母”之类的选择器,而这在一些出版场景里又是必须的,这一情况下出现的.引用标准中的话: CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on infor

CSS基础学习十:伪元素

上一篇博客说的是伪类,这次我们来说说伪元素.先来补充一下上篇博客漏掉的一个伪类::focus 伪类 (1)定义和用法 :focus伪类在元素获得焦点时向元素添加特殊的样式.注释IE浏览器不支持此属性. (2)说明 这个伪类应用于有焦点的元素. 例如HTML中一个有文本输入焦点的输入框,其中出现了文本输入光标:也就是说,在用户开始键入时,文本会 输入到这个输入框.其他元素(如超链接)也可以有焦点,不过CSS没有定义哪些元素可以有焦点. a:link {color: #FF0000} /* 未访问的