02-CSS

作者: OK_1f21 | 来源:发表于2018-07-05 20:40 被阅读0次

#是占位符

<a href = "malito:aaa@bbb.com">联系我们</a>

层次高的会覆盖层次低的

内联样式

<p stple = 'color:red;font-size:40px'>

内部样式表

<style type = 'text/css'> </style>

为指定样式设置

<llink rel= 'stylesheet' type= 'text/css' href = 'css/style.css'>

css注释/*内容*/ 必须写在style中

选择器 声明快

p {color :xx ; font-size:xx;}

p#p$*4

ctrl+/注释

ctrl+shift+d 复制

span为文字设样式

标签名{}

id选择器

#id属性值{}

类选择器 通过class属性选中一组元素

.class属性值{}

选择器分组 可以选中多个选择器

选择器1 选择器2 选择器n{}

通配选择器 所有样式

*{}

符合选择器

选择器1.选择器2.选择器n{}

后代元素选择器

祖先元素 后代元素{}

子元素选择器 选中父元素里指定的子元素

父元素>子元素

伪类选择器 都是冒号开头

名称:选择{}

文本输入框

<input type = 'text'>

input:focus{背景色}

p::selection{}

p::-moz-selection{}

伪元素

p:first-letter{内容}

p:first-line{内容}

p:before{content:内容; color:}开头  / after结尾

p:first-child{内容}   one  last最后

p:nth-child(第几个){内容}

first-of-type{内容}

兄弟元素选择器

span + {内容}后一个  ~所以的兄弟元素

否定伪类

p:not(内容):{} 否定,不是

a的伪类


样式继承

把样式个祖先元素,让子类继承

跟背景相关的样式不能被继承

选择器权重:

!important 最高优先级

内联样式  1000!

id选择器    100

类和伪类     10

元素选择器     1

通配   *     0

继承的样式,没有优先级

一样的话使用后面的

并集选择器单独计算优先级

!important 最高优先级


<p title = '内容'> 任何标签都可以用

p[title]{} title属性标签

[属性名 = 属性值]

[title^ = ‘ab’] 以ab开头的 $结束


块元素

无论多少都会独占一行

div  p h1~h6  ul li...


内联元素(行内元素)不会独占一行

span a img iframe

块元素包含内联元素 a除外

a可以包含任意元素,出来它本身


复习:

使用伪元素来表示元素中的一些特殊的位置

一般设置常用的命令:颜色:color   字体:font-size   背景色:background-color

:link 表示普通的链接(没访问过的链接)

:visited 表示访问过的链接

:hover 表示鼠标移入的状态

:active 表示超链接被点击的状态

brfore 前    after后

可以将CSS样式编写到head中的style标签里,称为内部样式表


作业

plate  元素选择器

bento   元素选择器

#fancy    id选择器

plate apple  后代元素选择器

#fancy pickle   复合选择器

.small   类选择器

orange.small   类选择器

bento orange  后代元素选择器

plate,bento,plate  并集选择器

* 通配选择器   选择一个类里所有的东西

plate*  后代元素选择器(plate中所有的元素)

plate+apple    兄弟选择器     (不明白为什么要这样写)

plate~pickle      (同上)

plate>apple      子元素选择器

orange:first-child 子元素选择器

:only-child 子元素选择器 (只选择一个子元素)

.small:last-child  子元素选择器

plate:nth-child(3)  子元素选择器

nth-last-child(4)   子元素选择器

apple:first-of-type   子元素选择器

plate:nth-of-type(even)    子元素选择器

plate:nth-of-type(2n+3)     子元素选择器

apple: only-of-type   子元素选择器

.small:nth-child(even)    子元素选择器

bento:empty    子元素选择器(子元素为空)

apple:not(.small)    not选择器

                                                                                                                                                                                                               ----  吕东泽

相关文章

  • 02-CSS

    #是占位符 联系我们 层次高的会覆盖层次低的 内联样式 内部样式表 为指定样式设置