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

Day 49 CSS样式.

时间:2018-04-12 19:58:07      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:分组   嵌套   soft   段落   weight   默认   UI   first   repeat-x   

外部样式

 1.元素选择器

/*1. 元素选择器*/
p{
color :red
}
<p>1.我是一个p标签</p>

2.ID选择器
/*2 ID 选择器*/
#p{
color :deeppink;}

<p id = p> 2.我是一个带id的p标签</p>

/*3类选择器*/
.c1 {
color: blue
}
<div id =c1>3.你好 我是一个div标签</div>

/*4. 通用选择器
*{
color: brown;
background: black;
}
*/
 

组合选择器

 

/*5. 后代选择器  */


/*6儿子选择器*/
div >p {
color : brown;
}
<div>
<p> 6.这里是子类选择器p</p>
</div>

/*7 毗邻选择器 */
div+p{
margin: 5px ;
color : aqua;
}
 /*8.弟弟选择器
/ div后面所有的兄弟p标签
*/
div~p{
border:20px solid royalblue;
color :red
}

<div> 8.弟弟后面所有兄弟标签div</div>
<p> 8.div后面所有的兄弟p标签111111111111111</p>
/* 9 .用于选取带有指定属性的元素。*/
p[title]{
color : yellow;

属性选择器



}
/* 10 .用于选取带有指定属性的元素。*/
p[title =[‘23‘]{
color : brown;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
  color: green;
}

分组和嵌套

分组

当多个元素的样式相同的时候,我们没有必要重复地为每个元素都设置样式,我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。 

 

div, p {
  color: red;
}

通常,我们会分两行来写,更清晰:
 
div,
p {
  color: red;
}

种选择器可以混合起来使用,比如:.c1类内部所有p标签设置字体颜色为红色。


.c1 p {
  color: red;
}

伪元素选择器

 

first-letter

 p:first-letter {

  font-size: 48px;
  color: red;
}

before

/*在每个<p>元素之前插入内容*/
p:before {
  content:"*";
  color:red;
}

after

/*在每个<p>元素之后插入内容*/
p:after {
  content:"[?]";
  color:blue;
} 

before和after多用于清除浮动。

 

CSS属性相关

字体属性

 

文字字体

 font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

字体大小

 
p {
  font-size: 14px;
}

如果设置成inherit表示继承父元素的字体大小值。

 

字重(粗细) 

font-weight用来设置字体的字重(粗细)。

 

描述
normal 默认值,标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细,400等同于normal,而700等同于bold
inherit 继承父元素字体的粗细值
 

文本颜色

 

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定:

  • 十六进制值 - 如: FF0000
  • 一个RGB值 - 如: RGB(255,0,0)
  • 颜色的名称 - 如:  red

还有rgba(255,0,0,0.3),第四个值为alpha, 指定了色彩的透明度/不透明度,它的范围为0.0到1.0之间。

 

文字属性

文字对齐

text-align 属性规定元素中的文本的水平对齐方式。

 

描述
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐
 

文字装饰

 

text-decoration 属性用来给文字添加特殊效果。

 

描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。




常用的为去掉a标签默认的自划线:

a {
  text-decoration: none;
}

首行缩进

将段落的第一行缩进 32像素:

p {
  text-indent: 32px;
}

背景属性

 
/*背景颜色*/
background-color: red; /*背景图片*/ background-image: url(‘1.jpg‘);
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x:背景图片只在水平方向上平铺
repeat-y:背景图片只在垂直方向上平铺
no-repeat:背景图片不平铺
*/ background-repeat: no-repeat; /*背景位置*/ background-position: right top(20px 20px);
 
 

Day 49 CSS样式.

标签:分组   嵌套   soft   段落   weight   默认   UI   first   repeat-x   

原文地址:https://www.cnblogs.com/mengbin0546/p/8809871.html

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