css(1)


css基本样式

/*  */css内容注释

选择器{属性:值;}

width:px;宽度

height:px;高度

px->像素

%->百分比

body{background-color :;}可以改变浏览器窗口背景颜色


内联样式

在html标签上添加style属性实现的

style=""


内部样式

在<style>标签内添加的样式

<style></style>


外部样式

引入一个单独的css文件

通过link标签引入外部资源,rel属性指定资源跟页面的关系,href属性资源的地址。

(1)link rel="stylesheet"href="css文件夹/文件>

(2)<style>@import url(css文件夹/文件)</style>


css颜色表示

background-color:;背景颜色

color:;颜色

transparent透明颜色

(1)单词表示法:red、blue、green、yellow……

(2)十六进制表示法:由0123456789 abcdef组成,比如#5ac87f、#0f0f0f……

(3)RGB三原色表示法:红绿蓝用rgb表示()()()取值范围0-255


css背景样式

background-color:;背景颜色

background-image:url( );背景图片

(1)background-repeat:;背景图片平铺

  repeat-x x轴平铺

  repeat-y y轴平铺

  no-repeat 不平铺

(2)background-position:;背景图片的位置

  x轴( )px  y轴( )px

  x轴100%      y轴100%

  x轴  left 左 center中间 right右

  y轴  top上  center中间 bottom下

(3)background-attachment:;背景图随滚动条的移动方式

  scroll默认

  fixed固定

(4)background-size:;背景图片大小

  x轴( )px  y轴( )px

  x轴100%      y轴100%

  cover完全覆盖

  contain包含图片,覆盖不满


css边框样式

(1)border-style:;边框样式

  solid实线

  double双实线

  dashed虚线

  dotted点状线

  border-width:;边框大小

  border-color:;边框颜色

(2)边框也可以针对某一边单独设置

  border-      -style:;

  left左

  right右

  top上

  bottom下


css文字样式

(1)font-family:;字体类型

  英文字体:Arial,'Times New Roman'……

  中文字体:微软黑体,宋体……

(2)font-size:;字体大小

  默认是16px

  字体大小建议用偶数

(3)font-weight:;字体粗细

  数值写法: 100-900

  单词写法: 正常(normal) 加粗(bold)

(4)font-style:;字体样式

  模式: 正常(normal)斜体(italid)倾斜(oblique)

  italid  带有倾斜属性的字体才可以设置倾斜操作

  oblique  没有倾斜属性的字体也可以设置倾斜操作

(5)color:;字体颜色

(6)text-decoration:;文本修饰

  none不添加任何装饰

  underline下划线

  overline上划线

  line-through删除线

(7)text-transform:;文本单词大小写取值

  capitalize单词首字母大写

  lowercase所有单词小写

  uppercase所有单词大写

(8)text-indent:;首行缩进

  em单位:相对单位,一个em永远跟字体大小相同

(9)text-align:;文本对齐方式

  left靠左

  right靠右

  center中间

  justify两端对齐只对多行文本有用

(10)line-height:;定义行高

  默认行高:不是固定值,而是变化的。根据当前字体大小不断变化。

  取值:(    px)像素    (数值)比例值,跟文字大小成比例

(11)间距

  letter-spacing:;定义字间距

  word-spacing:;定义词间距(针对英文)

(12)折行

  word-break:break-all;(非常强烈的折行)

  word-wrad:break-word;(不是那么强烈的折行,会产生一些空白区域)


复合样式

一个css属性只控制一种样式,叫单一样式。

一个css属性控制多种样式,叫做复合样式。

复合的写法是通过空格的方式来实现的。

(1)background:;颜色 图片 平铺 位置……(顺序无要求)

background:red url( ) no-repeat center center;

border:;大小 颜色 样式……(顺序无要求)

border:2px black solid;

(2)font:;……大小 类型

(最少要有大小和类型这两个值顺序不能变)

(它们两个也要写到最后)

(行高可以写在大小后面记得加/)

font:bold italic 30px/40px 宋体

尽量不要单一样式和复合样式混写

如果非要混写,那么一定要先写复合样式在写单一样式


css列表属性

(1)list-style-type:;初始列表

disc实心圆

circle空心圆

square实心正方形

none不显示

(2)list-style-image:url(  );图片列表

(3)设置列表项标记的放置位置

list-style-position:( );

outside    列表外面

inside      列表里面

list-style:复合属性  可以把3个属性都写在一起

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

推荐阅读更多精彩内容

  • 第一章 F12: element.style 内联样式(可以直接在上面写代码进行简单调试) user agent...
    fastwe阅读 1,495评论 0 0
  • ###CSS Cascading Style Sheets 层叠样式表 ---- ####css书写格式 ``` ...
    一通哥阅读 518评论 0 0
  • 废弃版 css1 - Formatting model CSS1 assumes a simple box-ori...
    刘程源阅读 323评论 0 0
  • **CSS:全称层叠样式表(Cascading Style sheets) **样式表组成: 1.由一条条...
    慕名66阅读 194评论 0 0
  • 花了1周的时间也学完了CSS, 在这里我也讲黑马博客中pink老师的讲解内容记录一下。 CSS 是层叠样式表 (C...
    blackmanba_084b阅读 597评论 2 5