外部样式

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. IIS 设置404页面 显示系统找不到指定的文件

    1.原因就是IIS的普通用户没有访问404页面的权限,造成了自定义404页面无法显示.只需要将user用户组具有读的权限即可.

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

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

  3. W-D-S-UART编程

    1.协议原理 2.原理框图 3.开发板底板与核心板图 4.开始配置寄存器 a).使相应I/O引脚配置为UART引脚 b).配置数据发送模式 c).设置为中断或查询模式 d).使能串口缓存 e).流量控 ...

  4. part1:12-sudo用户管理和Linux密码故障排除

    sudo用户管理 权力下放! 1.Root密码破解步骤 a.在系统启动时,迅速按下任意键或回车键.进入grub选项菜单 b.在grub选项菜单按e进入编辑模式,上下选择kernel行.然后按e进入编辑 ...

  5. ubuntu 'yuan' update

    #  tsinghua  university deb http://mirrors.aliyun.com/ubuntu/ trusty main restricted universe multiv ...

  6. 2018秋季C语言基础课第1次作业

    1.翻阅邹欣老师博客关于师生关系博客,并回答下列问题: 1)大学和高中最大的不同是没有人天天看着你,请看大学理想的师生关系是?有何感想? 答:是  Coach / Trainee (健身教练 / 健身 ...

  7. Android 编译参数 LOCAL_MODULE_TAGS

    此参数会影响到库生成后的存放位置,影响生成位置的应该是相关平台下的变量PRODUCT_PACKAGES http://blog.csdn.net/evilcode/article/details/64 ...

  8. SQLServerException:将截断字符串或二进制数据的解决方法

    SQLServerException:将截断字符串或二进制数据的解决方法: 最近使用JPA进行保存对象到数据库中怎么也添加不进去,始终报错 主要原因就是你增加的数据字段长度超过数据库中字段所定义长度, ...

  9. 美团点评2017校招笔试真题-算法工程师B

    美团点评2017校招笔试真题-算法工程师B 1.以下关于经典的k-means聚类的说法哪个是错误的? A:k-means聚类算法是全局收敛的 B:k-means的聚类结果和初始聚类中心点的选取有关 C ...

  10. javascript对数组分页

    function pagination(pageNo, pageSize, array) { var offset = (pageNo - 1) * pageSize; return (offset ...