外部样式

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样式.的更多相关文章

  1. 一个简陋的 CSS 样式

    有些网友对 Smart Framewok 中的 Sample 示例的样式比较感兴趣.由于本人对前端不太精通,但为了满足网友们的需求,只好献丑了. 以下这个简陋的 CSS 样式: ? 1 2 3 4 5 ...

  2. CSS样式内容

    CSS代码规范:尽量不要在标签内使用样式代码. .css文档内部声明不换行可以节省内存. 谨记: 常犯的错误是.html文档和.css样式表都写好了,但总会忘记插入样式表. 1.字体的样式 ​  2. ...

  3. 响应式布局和BootStrap 全局CSS样式

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  4. 前端之css样式(选择器)

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...

  5. 如何让不同浏览器调用不同的CSS样式

    如何让不同浏览器调用不同的CSS样式 由 于对W3C标准支持程度的不同,往往导致同一个CSS样式表在各种Web浏览器中的呈现大相径庭.以目前市场占有率最高的两个浏览器Microsoft Interne ...

  6. css样式重置 移动端适配

    css  默认样式重置 @charset "utf-8"; *{margin:0;padding:0;} img {border:none; display:block;} em, ...

  7. css样式让input垂直居中

    css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...

  8. 深度理解CSS样式表,内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js设置css样式.

    在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...

随机推荐

  1. Developing ADF PageTemplates

    Developing ADF PageTemplates In this hands-on, you learn how to create a page template and use this ...

  2. URL统一资源定位符的组成

    URL:Uniform Resource Locator统一资源定位符 用于定位网络上我们需要访问的资源 组成:协议名称+域名+路径+资源的名称.如:https://img13.360img.com/ ...

  3. Thread.currentThread().getName() ,对象实例.getName() 和 this.getName()区别

    原文链接:http://www.cnblogs.com/signheart/p/922dcf75dd5fe6b418d4475af89c4664.html 使用Thread.currentThread ...

  4. AOP不起作用的原因之一

    在-servlet.xml配置context:component-scan后,Spring在扫描包时,会将所有带 @Service注解的类都扫描到容器中.而-servlet.xml和applicati ...

  5. PAT 1083 是否存在相等的差(20)(代码+思路)

    1083 是否存在相等的差(20 分) 给定 N 张卡片,正面分别写上 1.2.--.N,然后全部翻面,洗牌,在背面分别写上 1.2.--.N.将每张牌的正反两面数字相减(大减小),得到 N 个非负差 ...

  6. 连接redis

  7. JVM 系列(一)类加载

    JVM 系列(一)类加载 类加载机制是指把 class 文件加载到内存,并对数据进行校验.解析和初始化,最终形成 JVM 可以直接使用的 Java 类型的过程. ClassLoader 加载一个 cl ...

  8. OSGi 系列(十四)之 Event Admin Service

    OSGi 系列(十四)之 Event Admin Service OSGi 的 Event Admin 服务规范提供了开发者基于发布/订阅模型,通过事件机制实现 Bundle 间协作的标准通讯方式. ...

  9. 【JS】判断浏览器类型

    判断原理 JavaScript是前端开发的主要语言,我们可以通过 编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性 ...

  10. Android教程:wifi热点问题

    http://www.linuxidc.com/Linux/2012-05/60718.htm 现在很多移动设备都提供wifi hostpot功能,使用方便,也省下了原来无线路由器的成本.wifi和w ...