CSS样式学习笔记

一.基础知识

1.基本构成:选择符和声明,声明包括属性和值。

图片发自简书App

2.注释/*...*/

3.在html中插入形式(离被设置元素越近,优先级越高)

(1)内联式:直接写在现有的html标签中

<p style=“color:red;font-size:12px;...”>...</p>

(2)嵌入式(写在<head></head>之间)

<style type=“text/css”>

span

{

color:red;

}

</style>

(3)外部式:写入单独文件*.css

在head内使用link链接入html

<link href=“*.css” rel=“stylesheet” type=“text/css”>  rel和type是固定写法

二.选择器

1.标签选择器(html中的标签)

标签{样式设置;}

✔可写成分组选择器

标签1,标签2{样式设置;}

2.类选择器

<span class=“类名1 类名2”>...</span>...

<span class=“类名1 类名2”>...</span>...

.类名1{样式设置;}

.类名2{样式设置;}

3.id选择器

<span id=“id名”>...</span>

#id名{样式设置}唯一性

4.子选择器(只包含第一代)

.类名>span{样式设置;}

5.包含(后代)选择器

.类名 span{样式设置;}

6.通用选择器(设置所有的标签样式)

*{样式设置;}

7.伪类选择器(给标签的某种状态添加样式)

标签.hover{样式设置;}鼠标划过时的样式

三.选择器权值

1.标签是1

2.类选择是10

3.id选择是100

例:

图片发自简书App


四.文字排版

1.body{font-family:"Microsoft Yahei";}给网页设置字体-微软雅黑

2.body{font-size:12px;color:red;}给网页设置字号和颜色

3.p span{font-weight:bold;}文字设置为粗体

4.p a{font-style:italic;}文字设置为斜体

5.p a{text-decoration:underline;}文字设置下划线

6.   .oldPrice{text-decoration:line-through;}文字设置删除线

7.p{text-indent:2em;}段落缩进2个

8.p{line-height:2em;}行间距2倍行高

9.h1{letter-spacing:50px;}中文字,字母间距

h1{word-spacing:50px;}单词间距

10.h1{text-align:center;}段落居中

h1{text-align:left;}段落居左

h1{text-align:right;}段落居右

五.布局模型

1.流动模型(flow)默认

第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%。

第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)

2.浮动模型(float)

div{float:left}

div块在一行按居左顺序显示

3.层模型(layer)

层模型有三种形式:

(1)绝对定位(position: absolute)

图片发自简书App

(2)相对定位(position: relative)

图片发自简书App


(3)固定定位(position: fixed)

fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响

(4)相对于某个模块定位

图片发自简书App

六.代码缩写

1.盒模型缩写见html

2.颜色缩写

p{color:#000000}   缩写 p{color:#000}    

p{color:#336699}    缩写p{color:#369}  

3.字体缩写

图片发自简书App

注意:

1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。

2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用:

图片发自简书App

七.值

1.颜色值

在网页中的颜色设置是非常重要,有字体颜色(color)、背景颜色(background-color)、边框颜色(border)等,设置颜色的方法也有很多种:

图片发自简书App


八.样式设置

(一).居中

1.行内元素

      如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素:如下面的html代码中,div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码:

图片发自简书App

2.块状元素之定宽

       定宽块状元素:块状元素的宽度width为固定值。

       满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中:

图片发自简书App

3.块状元素之不定宽

(1)加入 table 标签

       为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。


第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )。

第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。

举例如下:

图片发自简书App

(2)设置 display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置。

改变块级元素的 display 为 inline 类型(设置为 行内元素 显示),然后使用 text-align:center 来实现居中效果。

图片发自简书App

这种方法相比第一种方法的优势是不用增加无语义标签,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。

(3)设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的。

我们可以这样理解:假想ul层的父层(即下面例子中的div层)中间有条平分线将ul层的父层(div层)平均分为两份,ul层的css代码是将ul层的最左端与ul层的父层(div层)的平分线对齐;而li层的css代码则是将li层的平分线与ul层的最左端(也是div层的平分线)对齐,从而实现li层的居中。

图片发自简书App

4.垂直居中

(1)父元素高度确定的单行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的 基线间的距离 )。

line-height 与 font-size 的计算值之差,在 CSS 中成为“行间距”。分为两半,分别加到一个文本行内容的顶部和底部。

这种文字行高与块高一致带来了一个弊端:当文字内容的长度大于块的宽时,就有内容脱离了块。

图片发自简书App

(2)父元素高度确定的多行文本

a)使用插入 table  (包括tbody、tr、td)标签,同时设置 vertical-align:middle。

css 中有一个用于竖直居中的属性 vertical-align,在父元素设置此样式时,会对inline-block类型的子元素都有用。下面看一下例子:

图片发自简书App

b)这种方法兼容性比较差,只是提供大家学习参考。

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell(设置为表格单元显示),激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式, 兼容性比较差。

图片发自简书App

5.隐性改变diaplay类型

有一个有趣的现象就是当为元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之一:

a) position : absolute

b) float : left 或 float:right

简单来说,只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以 display:inline-block(块状元素)的方式显示,当然就可以设置元素的 width 和 height 了,且默认宽度不占满父元素。

如下面的代码,小伙伴们都知道 a 标签是 行内元素 ,所以设置它的 width 是 没有效果的,但是设置为 position:absolute 以后,就可以了。

图片发自简书App

九.样式

1.font-size:12px;字号

2.color:red;字体颜色

3.line-height:1.6em;行间距

4.font-weight:normal;去掉字体加粗

5.border:1px;边框1像素宽

6.solid:red;边框红色实心

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,718评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,683评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,207评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,755评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,862评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,050评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,136评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,882评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,330评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,651评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,789评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,477评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,135评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,864评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,099评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,598评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,697评论 2 351

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,741评论 1 92
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,630评论 0 30
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 933评论 0 1
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,212评论 0 5
  • CSS格式化排版 1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例...
    张文靖同学阅读 1,281评论 0 3