04.CSS基础01

0.快捷键:

对于webstom,先点击进入一个标签 按住alt 点击其他的标签里面,多点一些,可以同时操作,同时添加代码。

1.css定义

层叠样式表,主要作用对html的结构做外观样式的设置。
css是以html为基础。字体,颜色,背景,排版。

html层:结构层
css层:样式层
js层:行为层    

2.如何编写css样式

*注意:所有的标签都可以有一个id属性,name 属性, style属性

- 缺省样式(浏览器样式)  所有的标签都有一个默认的样式,我们称为浏览器样式,或者默认样式。
- 行内样式
- 内嵌样式(嵌入样式)  在head标签中添加style标签 
- 外联css样式,或者外部css样式
   <link ref="stylesheet" href="css/main.css"> link写在head里面
- @import url(css/main.css);   导入样式  不推荐使用了
  1. css语法

    选择符,属性声明,括号,换行不敏感,空格不敏感。
    div{color:red;}
    css的简单属性:width,height,color,background-color,font-size
    不建议写行内样式层叠

4.css选择器综述

<head>里面,<style>,p标签,*代表通配符选择器,通配符的穿透力很强,优先级高于继承的样式。
    margin:外边距    padding:内边距
id选择器:html标签都有公共id属性,而且整个页面唯一.  id 选择器命名规范,只允许出现字母,大小写区分,下划线,数字;只允许字母开头;命名没有长度限制,可以是1个字母,也可以是多个;不允许出现标签名(工作经验的表现)  【#】 

类选择器:class     【.】
    类标签可有2个类:class="web demo"  
    建议大家多使用类选择器

复合选择器:
    复合选择器是有2个或者多个基础选择器,通过不同的方式组合而成的。
    a.标签制定式选择器(即...又...)  标签制定式选择器又称交集选择器,优两个选择器构成,其中年第一个为标记选择器,第二个为class选择器或者id选择器,两个选择器之间不能有空格,如h3.special或p#one
    b.后代选择器(包含选择器)后代选择器用来悬着元素或元素组的后代,其写法就是把外层的标记写在前面,内层标记写在后面,中间用空格分隔。当标记发生前台时,内层标记就成为了
         .box li {
             color: green;
         }
    e.并集选择器
           h1, h2, p { color: red;}
    f.子元素选择器
         h1>strong { color: green;}
    g.属性选择器
        h1[id] = {} 把h1有id的选择器拉出来
        h1[class] = {}  把h1有class的选择器拉出来
        h1[id][class] = {}  把h1同时拥有id和class属性的选择器拉出来

5.css伪类

:link    伪类将应用于未被访问的连接,IE6不兼容,解决此问题,直接使用a标签。
:hover    伪类将应用于有鼠标的指针悬停于其上的元素,在IE6只能应用于a连接,IE7+所有元素都兼容。
:active    伪类将应用于被激活的元素,如被点击的连接没被按下的按钮等。
:visited    伪类将应用于已经被访问过得连接
:focus    伪类将应用于拥有键盘输入焦点的元素

6.工具:

markman用于标注。

7.对齐:

 <style>   
   .main {    
        width: 801px;       
        margin: 0 auto;  /* 上下:0  左右:auto */  
   }
</style>

8.字体:

h1 {    font: 24px "微软雅黑";    }

9.缩进:

.param_content {   
     text-indent: 2em;  /* 缩进2个字 */
}

10.去掉下划线:

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

推荐阅读更多精彩内容

  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,053评论 0 40
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,023评论 0 1
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,730评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,301评论 0 11
  • Everybody wants this,Everybody wants to be this 每个人都...
    普拉达MY阅读 1,019评论 2 6