与html相比,Css支持更丰富的文档外观,Css可以为任何元素的文本和背景设置颜色;允许在任何元素外围设置边框;允许改变文本的大小,装饰(如下划线),间隔,甚至可以确定是否显示文本。

什么是CSS?

CSS 指层叠样式表 (Cascading Style Sheets)

CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。

CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。

CSS就是控制页面布局和样式

HTML 结构层     负责从 语义的角度搭建页面结构

CSS 样式层   负责从 审美的角度美化页

JavaScript 行为层 负责从 交互的角度提升用户体验

语法结构:

选择器{属性:值;属性:值;…….}

选择器:选择谁

参数说明:属性和属性值之间用冒号(:)隔开,定义多个属性时,属性之间用英文输入法下的分号;隔开。

选择器:   实现CSS对HTML页面样式的控制,如果要让这些样式对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器,HTML页面中的元素就是通过CSS选择器进行控制的。

-选择器分类

基础选择器

标签选择器

类选择器

ID选择器

:复合选中器

2复合选择器

   3属性选择器

  1. 类选择器

a) .自定义类名{属性:值;…… 属性:值;}

  1. ID选择器

a) #自定义ID名{属性:值;…… 属性:值;}

通配符选择器

a) *{属性:值;······ 属性:值;}

b) 选择页面所有标签元素。给所有标签相同的样式

c) 不推荐使用

复合选择器:两个或者两个以上的基础选择器通过不同方式连接在一起

  1. 交集选择器

a) 标签+类(id)选择器{属性:值;}

b) 既要满足标签选择器,又要满足类(id)选择器

  1. 后代选择器(重点)

a) 选择器+空格+选择器+···+选择器+空格+选择器{属性:值}

b) 无限制隔代,选择器可自用组合

  1. 子带选择器

a) 选择器>选择器{属性:值;}

b) 选择直接子代,不选择子代以后的

  1. 并集选择器

a) 选择器,选择器,选择器…{属性:值;}

如何编写CSS样式?

内嵌(嵌入,内部)样式,head标签中添加style标签。

在head标签中添加style标签。

<head>

<style> p {color:red;}</style>

</head>

标签选择器其实就是html代码中的标签

Html中标签:<html>、<body>、<h1>、<p>、<img>等等

CSS简单属性

width:设置宽度,单位px像素

height:高度

color:前景色,也就是文字的颜色

background-color:背景色。

font-size:字体的大小。

        <style type="text/css">

            p{ background-color:red;} ;   设置北京晒(shai)

            h1{color:green ;}       设置标题筛

            span{font-size:14px ;}    设置span标签的文本为14像素

类选择器(class)

什么是类?

物以类聚,人以群分。比如:我们都是牛人!

黄种人、白种人、欧洲人、亚洲人

所有的鸭子、所有的猫、

类选择器,是对HTML标签中class属性进行选择。CSS类选择器的选择符是 “.“类选择器在css样式编码中是最常用到的。

类选择器语法格式:

使用方法:

第一步:使用合适的标签把要修饰的内容标记起来,如下:

<span>Web开发</span>

第二步:使用class="类选择器名称"为标签设置一个类,如下:

<span class="one">Web开发</span>

第三步:设置类选器css样式,如下:

.one{color:red;}

一个标签可以有多个类选择器的值,不同的值用空格分开,如:

<div class="one yellow leftStyle">此处为标签内的文字</div>

这样我们可以将多个样式用到同一个标签中

页面布局常见命名规范

l良好的代码:重用、有序、精简

头 / head      内容 / content 尾/footer

导航/nav   侧栏/sidebar       标志/logo

广告/banner    页面主题/main    内容/content

命名: 不能用数字开头。在名称内部可以出现特殊符号 例如:下划线_

a) 一个标签可以调用多个类选择器

b) 多个标签可以共用一个选择器

c) 类命名规则

  1. 不能用纯数字,不能以数字开头
  2. 不能实用特殊符号,和特殊符号开头, “_” 
  3. 不建议使用汉字来定义类名
  4. 不推荐使用属性和属性值来做类名

ID 选择器

语法格式:   id选择器 以“#” 来定义:

#header  { color:red; font -size: 25px}

 

通配符选择器

使 用“ *”号表示,是所有选择器中作用的范围最广范的, 可以匹配页面中所有的元素:

* { 属性1:属性值1 ; 属性2:属性值2; ... }

*{font-size:18px  }

 

CSS复合选择器 - 标签指定式

复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的:

1 标签指定选择器(即... 又...)

标签指定式选择器又称交集选择器,由两个选择器构成,其中第一个为标记选择器,第二个为class选择器 或 id 选择器,两个选择器中间不能有空格 例:h3.special 或 p#one

后代选择器(包含选择器)

后代选择器用来选择元素或者元素组的后代,其写法就是把外层标记写前边,内层的标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代;

后代选择器首选要满足包含(嵌套)关系。

父集元素在前边,子集元素在后边。

特点:无限制隔代。

只要能代表标签,标签、类选择器、ID选择器自由组合。

◆子代选择器

选择器>选择器{属性:值;}

选中直接下一代元素。

 

并集选择器

并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器(包括标记选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式。

3:属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input[type=text][id="3"]{
width: 300px;
height: 300px;
background: #aaa;
}
input[type=text][class="4"]{
width: 300px;
height: 300px;
background: #faa
}
</style>
</head>
<body>
<input type="text" class="4">
<input type="radio">
<input type="text" id="3" >
</body>
</html>

与复合选择器相似,必须满足所有条件才生效

文本元素

CSS 相关的属性:

Text-alignift / center/ right文字剧中格式

Font-style    Normal默认/ italic斜体 / 字体风格

Font-weight  normal默认/ bold 粗体/100px 字体加粗

Font-size     18px字体大小

Font-family   微软雅黑,宋体字体格式

Color 颜色 字体颜色

div{

Font-style : normal ;

Font-weight : 700   (值从100到900,文字粗细,不推荐用font-weight : bold ; )

Font-size : 19px   

Font-family : 宋体

Line-height : 30 ;

}

p{
text-indent: 2em; /*em是相对单位,2em即现在一个字大小的两倍*/
}

CSS字体合写

字体合写语法格式:

选择器{font:font-style  font-weight  font-size/line-height  font-family}

Font : italic   700 16px/40px     微软雅黑;

    斜体   加粗  字体大小和行距    字体格式

 

必须有字体大小和字体格式(font-size font-family)必须按照顺序写

文字的表达方式

直接写中文名称:

Div {

Font-family : 微软雅黑;

Font-size : 60px ;

}

写字体的英文名称:

Div {

Font-family : microsoft yahei ;

Font-size : 60px ;

}

 

Font

l Font:style | small-caps(小型大写字母) | weight | size/ling-height | family

l 使用复合属性必须按照如上的顺序来写属性值

l 每个参数仅允许有一个值

l 忽略的属性将使用该属性的默认值

Color

  1. RGB显示模式color:rgb(255,255,255);
  2. RGBA显示模式 color:rgba(255,255,255,0.5);
  • A是alpha不透明度,可选值为0-1;
  • 0是完全透明,1是完全不透明

l Color:#(FFFFFF)/六位十六进制数

#(FFF)/三位十六进制书

1:完全不透明

0:完全透明

Text-decoration:字体装饰

l Underline:下划线

l Overline:上划线

l Line-through:删除线

l None:无装饰

l 有href属性的a标签默认属性是undeline

l 没有文本对象的内容此属性不起作用

l Blink:闪烁(不知道其作用是什么)

Text-shadow:字体阴影

l Text-shadow:color | length(水平延伸距离)| length(垂直延伸距离)| opacity(模糊效果的程度,数值越大越模糊)

l Opacity不可为负值

l Length可为负值

l 可以被用于伪类:first-letter:first-line

l 可以设定多组效果,方式是用逗号隔开。

Font-variant:small-caps小型大写字母

l Normal 正常的字体

Text-transform:字母大小写转换

l None:不转换

l Uppercase:转换为大写

l Lowercase:转换为小写

l Capitalize:首字母大写

Letter(word)-spacing:文字(单词)之间的间隔

l Normal:默认间隔

l Length:数值,允许为负值,由浮点数或者单位标识组成

文本Text

Text-lntent:首行缩进

l Length:百分比数字|由浮点数字和单位标识符组成的长度值,允许为负值。

l 在被另一个对象(如)断开的对象内不能应用本属性。

Text-overflow:设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。

l Clip:不显示省略标记(…),而是简单的裁切

l Ellipsis:当对象文本溢出时显示 省略标记(…)

Text-align:文本对齐

l Left/right/center/justify

l Justify:两端对其

Layout-flow:文本流动的方向

l Horizontal:正常的从左往右

l vertical-ideographic : 对象中的内容自上而下流入,下一行在前一行左面。

direction:文本流动方向

l ltr | rtl | inherit :从左往右 | 从右往左 | 继承

unicode-bidi: 用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用。

l unicode-bidi : normal | bidi-override | embed

normal : 对象不打开附加的嵌入层,对于内联要素,隐式重排序跨对象边界进行工作

embed : 对象打开附加的嵌入层,direction属性的值指定嵌入层,在对象内部进行隐式重排序

bidi-override : 严格按照direction属性的值重排序。忽略隐式双向运算规则

  1. direction: rtl;
  2. unicode-bidi:bidi-override;

l 以上代码可实现,汉字从右往左流动

Work-break:文本换行

l word-break : normal | break-all | keep-all

l normal:正常换行

l break-all:允许非亚洲语言文本行的任意字内断开

l keep-all:对于中文,韩文,日文,不允许字断开

write-space:对象对空格的处理

l white-space : normal | pre | nowrap

l normal:默认处理方式,多个合成一个

l pre:按照代码内输入的输出,用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。

l nowrap:强制在同一行内显示所有文本,直到文本结束或者遭遇br对象

所有的text标签

  1. text-indent  text-overflow  vertical-align  text-align  layout-flow  writing-mode direction  unicode-bidi  word-break  line-break white-space word-wrap text-autospace 
  2. text-kashida-space  text-justify  ruby-align  ruby-position  ruby-overhang 
  3. ime-mode 
  4. layout-grid  layout-grid-char  layout-grid-char-spacing  layout-grid-line 
  5. layout-grid-mode  layout-grid-type

Unicode字体编码/

在浏览器中按F12

第一步 :F12

第二步 :找到console

第三布 :输入escape(“宋体”) 注意字符

            

CSS.01 -- 选择器及相关的属性文本、文字、字体、颜色、的更多相关文章

  1. python 46 css组合选择器 及优先级 、属性选择器

    一:css组合选择器 特性:每个选择器位可以为任意基本选择器或选择器组合 选择器分为以下几类: 群组选择器,子代(后代)选择器,相邻(兄弟)选择器,交集选择器,多类名选择器 1.群组选择器:    d ...

  2. Linux文本界面字体颜色修改

    环境 基于centos 6.5 在文本界面 系统目录的字体颜色是 黑底蓝字  严重看不清楚,对此作出修改 使用 vi 编辑   进入  /etc/DIR_COLORS 找到“DIR 01;34   # ...

  3. UITabBar-UITabBarItem图片的背景颜色属性和文字的颜色大小设置

    UITabBarItem设置的图片选中状态下默认的是蓝色,如何改变它的颜色为图片自带的颜色呢? typedef NS_ENUM(NSInteger, UIImageRenderingMode) { / ...

  4. CSS3初学篇章_3(属性选择符/字体样式/元素样式)

    属性选择符  选择符  说明  E[att]  选择具有att属性的E元素.  E[att="val"]  选择具有att属性且属性值等于val的E元素.  E[att~=&quo ...

  5. H5表单中placeholder属性的字体颜色问题

    最近做项目的时候遇到的一些小样式问题,有关表单.并且在接下来几天的面试人中五个人都没有回答上来,改变placeholder属性的默认字体颜色,感觉有必要总结一下. 如何改变默认字体的颜色? @blue ...

  6. HTML5之placeholder属性以及如何更改placeholder属性中文字颜色

    今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应 ...

  7. 转: HTML5之placeholder属性以及如何更改placeholder属性中文字颜色

    今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应 ...

  8. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  9. CSS基础选择器(选择器的优先级),CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成,盒模型-block,盒模型布局

    CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; ...

随机推荐

  1. GIS制图人员的自我修养(1)--制图误区

    GIS制图人员的自我修养 by 李远祥 最近一直坚持写GIS制图的技术专题,并不是为了要介绍有什么好的技术和方法去制图,而是要告诉所有从事这一方向的人员一个铁铮铮的实现--要做好GIS制图,必须加强自 ...

  2. js加密

    在项目中,经常需要使用加密来保障数据的安全性,虽然可以通过在后台加密再传给前台,但这样无疑会增加后台的服务器的压力.所以在js中使用加密算法也就应运而生了. 一.base64加密 需要引入base64 ...

  3. Xcode插件包Alcatraz

    安装命令  curl -fsSL https://raw.github.com/alcatraz/Alcatraz/master/Scripts/install.sh | sh 终于可以了  这个其实 ...

  4. Eclipse中debug调试java代码一直报Source not found的解决办法

    今天使用eclipse的debug调试代码,一直没法正常调试,一按F6就提示Source not found 根据提示发现可能是另一个项目影响了,所以把另一个项目Close Project,这次直接t ...

  5. erlang erl文件编译的三种脚本

    方案1:命令行 #!/bin/sh #file name: erl.sh #author: stars #time:2015.06.05 #eg: ./erl.sh hello.erl start 2 ...

  6. 模拟做饭系统(java+线程中的join方法)

    (一)项目框架分析 妈妈要去做饭,发现没有酱油,让儿子去买酱油,然后回来做饭. 根据面向对象的思想,有两个对象,妈妈和儿子 主要有两个方法: (一)没有线程控制(即儿子没有买酱油回来妈妈就做好饭了)+ ...

  7. php弱类型语言中的类型判断

    1.php一个数字和一个字符串进行比较或者进行运算时,PHP会把字符串转换成数字再进行比较.PHP转换的规则的是:若字符串以数字开头,则取开头数字作为转换结果,若无则输出0. 例如:123abc转换后 ...

  8. Hibernate一对一外键映射

    Hibernate 一对一外键映射                    ------------------------------                            ----- ...

  9. 【Zookeeper】源码分析之Leader选举(二)

    一.前言 前面学习了Leader选举的总体框架,接着来学习Zookeeper中默认的选举策略,FastLeaderElection. 二.FastLeaderElection源码分析 2.1 类的继承 ...

  10. BUG,带给我的思考

    今天打开EverNote时,翻到了四年前在anjuke时做的一些bug分析总结.现在回过头看看也是有些价值所在,挑选出部分bug分享,希望能有所启发. 一. iOS新房APP4.4由于在91市场进行试 ...