目次
1.1.1 CSSの紹介
1.2 セレクター
1.2.1 要素セレクター
1.2.2 属性セレクター
1.2.3 IDセレクター
1.2.4 クラスセレクター
1.2.5 にはセレクター
1.2.6 子セレクター
1.2.7 兄弟セレクター
1.2.8 セレクターの組み合わせ
1。 2.9 擬似要素セレクター
1.3 浏览器专属属性
1.4 JS修改CSS
2.1 字体相关属性
2.1.1 字体添加阴影
2.1.2 微调字体大小
2.2 CSS3支持的颜色表示方法
2.3 文本相关属性
2.4 服务器字体
2.4.1 优先使用客户端字体
3.1 背景相关属性
3.2 边框相关属性
3.1 大小相关属性
3.2 定位相关属性
3.3 轮廓相关属性
4.1 布局相关属性
4.2 给盒子加阴影
4.3 column-count分栏
5.1 表格相关属性
5.2 列表相关属性
5.3 控制光标的属性
5.4 media query功能
6.1 CSS3提供的变形支持
6.2 CSS3提供的Transition
6.3 CSS 3提供的Animation动画
ホームページ ウェブフロントエンド htmlチュートリアル クレイジーな Html+CSS+JS CSS summary_html/css_WEB-ITnose

クレイジーな Html+CSS+JS CSS summary_html/css_WEB-ITnose

Jun 24, 2016 am 11:34 AM

1 カスケードスタイルとCSSセレクター 1.1 CSSの基本的な使い方

1.1.1 CSSの紹介

/* 不建议@import 性能问题 */<link href="CSS文件路径" type="text/css" rel="stylesheet">
ログイン後にコピー

1.2 セレクター

1.2.1 要素セレクター

/* 仅对P标签有作用 */p{...}
ログイン後にコピー

1.2.2 属性セレクター

/* 仅对具有attr属性的E元素起作用 */E[attr]{...}/* 仅对attr=value的E元素起作用 */E[attr=value]{...}/* attr的值以空格为分隔符分开,其中一个值等于value即可的E元素 */E[attr~=value]{...}/* attr的值以连字符'_'为分隔符分开,其中一个值等于value即可的E元素 */E[attr |=value]{...}/* attr属性包含value值的E元素 */E[attr*="value"]{...}/* attr属性以value为开头的E元素 */E[attr^="value"]{...}/* attr属性以value为结尾的E元素 */E[attr$="value"]{...}
ログイン後にコピー

1.2.3 IDセレクター

/* id为xx的元素起作用 */#xx{...}/* id为xx的E元素起作用 */E#xx{...}
ログイン後にコピー

1.2.4 クラスセレクター

/* E为可选是否填写指定元素,my_class为指定lcass */[E].my_class{...}       /* class同时包含class1.class2 */.class1.class2{...}
ログイン後にコピー

1.2.5 にはセレクター

/* div内所有class为a的元素起作用,无论元素是否为子元素 */div .a{...} /*注意 包含关系有空格,同时满足关系无空格 */.class1 .class2
ログイン後にコピー

1.2.6 子セレクター

/* 仅对div的子元素且class为a的元素起作用 */div>.a{...} 
ログイン後にコピー

1.2.7 兄弟セレクター

/* id为android的标签 之后出现的且class为long的同级元素 */#android ~ .long{...}   
ログイン後にコピー

1.2.8 セレクターの組み合わせ

/*逗号分隔或关系,仅符合一种选择器即起作用 */#a,.b,div>.a{...}   
ログイン後にコピー

1。 2.9 擬似要素セレクター

  1. :first-letter
  2. :first-line
  3. :before
  4. :after

:first-letter と :first-line は、最初の単語の大文字化と最初の行の大文字化を実現できます このような質問

これら 2 つは擬似的なものであることに注意してください-attributes は、div、p、section などのブロック要素でのみ機能します。埋め込まれたスパンの場合、heihht と width、または postition:absolute、または display:block を設定する必要があります。

span{    disply:block;}//首字变蓝.span:first-letter{    color:#00f;}
ログイン後にコピー

:before および :after は挿入に使用されます。指定された要素の前後のコンテンツは、以下のコンテンツ関連の属性を参照してください

include-source: 属性値は url(url) です
  1. content : 指定されたコンテンツを挿入する関数。この属性の値は、文字列、url (url)、attr (alt)、counter (name)、counter (name、list-style-type)、引用符などの open-Format にすることができます。
  2. quotes: この属性の値は、スペースで区切られた 2 つの文字列であり、前部は開始引用符を表し、後部は引用符を表します。値はカウンターの名前です。
  3. counter-rest: カウンターをリセットします。
  4. 疑似クラスセレクター

    構造的。疑似クラス Selector
1.1 Selector:root: HTML 要素では、常に 要素を指します。

1.2 Selector:first-child: 親要素の最初のノードと一致します。 1.3 セレクター: last-child: セレクターと一致し、その親要素の最後のノードです

1.4 Selector:nth-child(n): セレクターと一致し、その親要素の n 番目のノードです
  1. 1.5セレクター: nth-last-child(n): セレクターと一致し、その親要素の最後から n 番目のノードです。

    1.6 Selector:only-child: セレクターと一致し、その親要素の唯一のノードです.

    1.7 Selector :first-of-type: セレクターと一致し、同じ型の兄弟要素の中で最初の要素です。

    1.8 Selector:last-of-type: セレクターと一致し、最初の要素です。同じ型の兄弟要素の間で。

    1.9 Selector:nth-of-type(n): セレクターと一致し、同じ型の兄弟要素の間で n 番目の要素です。

    1.10 セレクター: nth-last-of-type (n): セレクターと一致し、同じ型の兄弟要素のうち最後から n 番目の要素です

    1.11 セレクター:only-of-type: セレクターと一致し、同じ型の兄弟要素の 1 つだけ Element.

    1.12 Selector:only:empty: セレクターと一致し、その中に子要素 (テキストを含む) を持たない要素。

    first-child と first-of を取得します。例として -type を使用すると

     eg: <!-- 子div前添加文字和设置样式 --> div>div:before{     content: '文字';     colol: blue; } <!-- 含有class为on的子div之后的添加图片 --> div>div.no:after{     content:url("K.gif"); } <!-- 配合quetos 对的...其实这属性貌似并没神马卵用.. --> <!-- 是的,你没猜错..其实close-quote写在before里也是可以的.. --> div>div{     quotes: "<<" ">>"; } div>div:before{     content: open-quote; } div>divafter{     content:close-quote; } <!-- counter-increment添加编号1. 2. 3. --> div>div{     counter-increment: fucking_K; } div>div:before{     content: counter{fucking_K} '.';     font-size: 20pt; } <!-- 拓展样式 更多参数<https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-type> --> div>after{     content: counter{fucking_K,lower-roman} '.';     font-size: 20pt; } <!-- 多级编号 --> div>h2{     counter-increment: fucking_K; } div>div{     counter-increment: funcking_K2; } div>h2:before{     counter-increment: funcking_K;     counter-reset: fucking_K2; } div>div:before{     content: counter: funcking_K2; }
    ログイン後にコピー

    -child マッチングでは異なるタイプの他の兄弟ノードがカウントされますが、-of-type では同じタイプの兄弟要素のみがカウントされます

    それらのうち、nth-child(n)、nth-last-child( n)、nth-of-type(n)、nth-last-of-type(n) はパラメータをサポートします

    odd: 奇数番号の要素と一致します

    even: 偶数番号の要素と一致します

    xn+y: 一致します(x 倍 n) プラス y 要素

    UI 要素の状態疑似クラスセレクター
    1. 2.1 Selector:link: 未訪問の要素と一致
    2. 2.2 Selector:visited: 訪問した要素と一致
    3. 2.3 Selector:active:ユーザーはプロセス内でアクティブ化されます (マウスのクリックとリリース))
    2.4 Selector:hover: マウスホバー状態の要素と一致します
  2. 2.5 Selector:focus: フォーカスを受け取った要素と一致します

    2.6 Selector:enabled: フォーカスされた要素と一致しますは現在利用可能です

    2.7 Selector:disabled: 現在利用できない状態の要素と一致します

    2.8 Selector:checked: 現在選択されている状態の要素と一致します

    2.9 Selector:ready-only: 現在の読み取り専用状態の要素と一致します

    2.10 Selector:read-write: 現在読み取り/書き込み状態にある要素と一致します

    2.11 Selector::selection: 現在選択されているコンテンツと一致します

    特別な疑似クラスの選択

    3.1 Selector1:not(Selector2): 一致しますSelector1 セレクターですが、Selector2 セレクターの要素と一致しません

    3.2 Selector:target: Selector セレクターと一致するターゲット セレクターと一致し、名前付きポイントである必要があり、アクセスされています。

     :target{     background-color: #fff; } <a href="#K" /> //当正在浏览此div,:target生效 <div id="K">     ... </div>
    ログイン後にコピー

1.3 浏览器专属属性

  1. -ms- IE内核
  2. -moz- Gecko内核(Firefox)
  3. -o- Opera浏览器
  4. -webkit- Webkit内核(Chrome、Safari)

1.4 JS修改CSS

//修改属性//注意属性名中采用驼峰命名,例如改变background-color,属性名要写backgroundColordocument.getElementById("id").style.属性名=属性值;//修改classdocument.getElementById("id").className=class名称;
ログイン後にコピー
2 字体与文本相关属性

2.1 字体相关属性

  1. font: 可添加font-style,font-variant,font-weight,font-size,line-height,font-family等属性.
  2. color: 字体颜色,可颜色名,十六进制颜色值,RGB,HSL
  3. font-family: 设置字体,可用,分割按顺序使用字体
  4. font-size: 字体大小
  5. font-size-adjust: 对字体进行微调.
  6. font-streth: 改变字体横向拉伸,narrower既横向压缩,wider横向拉伸.
  7. font-style: 文字风格,常用属性有italic斜体,oblique倾斜体.
  8. font-weight: 是否加粗,属性可数值,也可lighter、normal、bold、bolder,越来越粗.
  9. text-decoration: 文字修饰线,常用属性有:none、blink闪烁、underline、line-through中划线、overline上划线.
  10. font-variant: 设置文字大写字母格式,属性有normal、small-caps(小型大写字母).
  11. text-shadow: 文字阴影效果,后面会详细提.
  12. text-transform: 字母大小写none,capitalize首字母大写、unpercase全部大写、lowercase全部小写;.
  13. line-height: 行高,负值时候可用来实现阴影效果.
  14. letter-spacing: 字符之后的间隔.最后一个字不受影响
  15. word-soacing: 单词之间的间隔.

2.1.1 字体添加阴影

text-shadow,多组阴影用,分割

  1. color: 指定阴影颜色.
  2. xoffset: 指定阴影在横向上的偏移量.(可负值)
  3. yoffset: 指定阴影在纵向上的偏移量.(可负值)
  4. redius: 指定阴影的模糊半径,半径越大越模糊 .

     <!-- 向右下角和左上角加阴影加阴影--> <span style="text-shadow:5px 5px 2px gray,-5px 5px 2px gray">帅哥麦</span>
    ログイン後にコピー

2.1.2 微调字体大小

font-size-adjust用调节同样字号不同字体的效果.

font-size-adjust通过设定aspect值从而控制不同字体的大小.

aspect等于字体小写x的高度除以该字体的大小.

    #div {        font-size: 16pt;        font-family: "狂草";        font-size-adjust:0.52;    }       #div2 {        font-size: 16pt;        font-family: "楷书";        font-size-adjust: 1.22;    }
ログイン後にコピー

2.2 CSS3支持的颜色表示方法

  1. 颜色名:white,red,greenyellow
  2. 十六进制
  3. rgb(r,g,b)
  4. rgba(r,g,b,a): a在0~1之间,0表示完全透明
  5. hsl(hue,saturation,lightness):色调,饱和度,亮度控制.
  6. hsla(h,s,l,a).

2.3 文本相关属性

此类属性用于控制整段或整个div的

  1. text-indent: 文本的缩进
  2. text-overflow:

    2.1 clip: 要指定overflow:hidden,隐藏溢出的文字

    2.2 ellipsi: 要指定了overflow:hidden,溢出时候用…标记

  3. vertical-align:指定内容垂直方式

    3.1 auto: 自动对齐

    3.2 baseline: 默认值,将支持valign属性的元素的文本内容与基线对齐

    3.3 sub: 文本下标对齐

    3.4 super: 文本上标对齐

    3.5 top: 默认值,将支持valign属性的元素的文本内容与元素的顶端对齐

    3.6 middle: 默认值,将支持valign属性的元素的文本内容对齐到元素的中间.

    3.7 bottom: 默认值,将支持valign属性的元素的文本内容与元素的底端对齐.

  4. text-align: left,right,center,justify(两端对齐)

  5. direction: 用于设置文本流入的方式,ltr(左到右),rtl(右到左),不会影响数字和拉丁文字母(除拉丁文标点符号).

  6. word-break: 用于设置目标组件中文本的换行方式

    6.1 normal: 按浏览器默认,西方文字:只会在半角空格、连字符地方换行.中文,任意文字后换行.

    6.2 keep-all: 只能在半角空格或连字符换行

    6.3 break-all: 允许在连续单词中间换行

  7. white-space:处理目标组件中文本对空格的处理

    7.1 normal: 自动换行

    7.2 nowrap: 强制文本一行显示,除非遇到

  8. word-wrap: 用于设定目标组中文本内容的换行方式

    8.2 normal: 浏览器默认

    8.3 break-word: 允许单词中间换行.

word-break兼容性不好,单词中换行最好使用word-wrap:breakword;

word-break和word-wrap区别:

  1. word-break: break-all:会让每一行文本最后一个单词换行.(不浪费一点空间)

  2. word-wrap: break-word:会让太长单词之前自动换行.

  3. 情况很多,不好理解.具体参考

2.4 服务器字体

  1. 下载.ttf/.otf字体
  2. 定义服务器字体

     <!-- src ...;后可跟字体样式属性 --> @font-face {     font-family: 404_K;     src: url(url) format("字体格式");     font-weight: blod; }
    ログイン後にコピー

2.4.1 优先使用客户端字体

    @font-face {        font-family: 404_K;        src: location("微软雅黑"),url(url) format("字体格式");        font-weight: blod;    }
ログイン後にコピー
3 背景、边框和补丁相关属性

3.1 背景相关属性

  1. background: 可控制背景颜色、背景图片、背景重复方式.
  2. background-attachment: 背景图片是否随对象内容滚动还是固定.

    2.1: scorll:背景随内容滚动

    2.2 fixed:背景图片固定.

  3. margin-right: 0px; margin-bottom: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px;">background-image: 背景图片,背景图片会覆盖背景色(假如同时设置了).

  4. background-position: 可百分百可数值,只设横百分比,纵百分比为50%.
  5. background-repeat:是否平铺

    6.1 repeat:平铺

    6.2 repeat-x:横向平铺

    6.3 repeat-y:纵向平铺

    6.4 no-repeat:不平铺

以下为CSS3新增

  1. background-clip: 指定背景覆盖范围.

    7.1 border-box: border-box(覆盖border,padding,content)

    7.2 padding-box: 覆盖padding,content(默认)

    7.2 content-box,只覆盖content.

  2. background-origin: 设置背景覆盖的起点,有点和background-position类似.或指定从哪个区域的开始放置背景图片(content,padding,border).Chrome和Safari使用要开-webkit开头.

  3. background-size: 设置图片大小.

    9.1 数值: 12px,13px 占宽12px,高13px;

    9.2 百分比: eg 80% 10%,宽占百分之80,高占百分之10%

    9.3 auto:只有一个值能为auto,根据另外一个值自动缩放(这个对响应式非常有用,保证图片不走形 100% auto,完全显示图片).

CSS3提供了多背景控制,属性还是上面的,多个背景属性用,隔开.

3.2 边框相关属性

  1. border: 设置边框样式,粗细,线型,颜色.
  2. border-color: 边框颜色..任何颜色值
  3. border-style: 边框样式

    3.1 none:无边框

    3.2 hidden: 隐藏边框,于none类似,当在表中可解决边框冲突

    3.3 dotted: 电线边框

    3.4 dashed: 虚线边框

    3.5 solid: 实现边框

    3.6 double: 双线边框

    3.7 grove: 3D凹槽边框

    3.8 ridge: 3D凸槽边框

    3.9 inset: 3D凹入边框

    3.10 outset: 3D凸出边框(个人感觉3.7,3.8和3.9,3.10类似,不过立体感弱一点)

  4. border-width: 边框线框.任何有效长度值.若只设width,是没法占位置的.

以下top bottom right left皆有.

  1. border-top: 设置上线的复合属性,可设置边框样式,粗细,线型,颜色.
  2. border-top-color: 上边框颜色.
  3. border-top-style: 边框样式
  4. border-top-width: 上边线框.
  5. border-top-colors: 渐变属性,CSS3新增,假设border-top-width为Npx,则可以设置N种颜色,从外框往里渐变,若设置的颜色个数小于width,最后一个颜色会作为之后的颜色.

圆角边框,CSS3新增

  1. border-radius: 圆角边框,数值代表圆角半径,半径越大,越圆,
  2. 还有border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius属性.

图片边框

  1. border-image: 语法: [/boder-image-width]?
  2. border-image-source: none/url(“图片路径”)
  3. border-image-slice: 可输1~4个百分比或数值用于切割图片,按上下左右切割,得出9张小图片,默认情况中间会丢弃.但例如 10 20&&fill中间就会保留放在内容中间.
  4. border-image-width: 为上面切割的图片设置宽度.可设置1~4个长度,百分比,或auto,指定image-slice的宽度.
  5. border-iamge-repeat: 指定图片覆盖方式.可设0~2个值,分别代表横竖.

    5.1 stretch: 拉伸覆盖

    5.2 repeat: 平铺覆盖

    5.3 round: 取整平铺,和repeat类似,

     当最后一张图片不能显示超过一半,则不显示最后一张图片,通过拉伸前面的图片实现填充. 当最后一张图片可以显示超过一半,则显示最后一张图片,压缩前面的图片.
    ログイン後にコピー

border存在则border-image相关属性不起作用.

3 大小、定位、轮毂相关属性

3.1 大小相关属性

  1. height: 设定高度
  2. max-height: 设定最大高度.当此属性小于min-height,则自动转化为min-height,下面属性同理
  3. min-height: 设定最小高度.
  4. width: 设定宽度
  5. max-width: 最大宽度
  6. min-widht: 最小宽度

CSS3新增属性

  1. box-sizing: 用于设定width和height控制content padding border等哪些区域.

    1.1 content-box: 只控制content

    1.2 padding-box: 控制content+padding

    1.3 border-box: 控制contetn+padding+border

  2. resize: 设置用户能否拖动组件来改变组件的大小

    2.1 none: 不能改变大小

    2.2 both: 能改变大小,但只能按比例缩放

    2.3 horizontal: 不允许改变高度,能改变宽度

    2.4 vertical: 不允许改变宽度,能改变高度

3.2 定位相关属性

定位作用为在于布局,漂浮~.除了position以外的其他属性不对static起作用.

  1. position 定位方式

    1.1 absolute: 组件会漂浮在页面上,不考虑周围内容

    1.2 relative: 参考前一个组件的位置来定位

    1.3 static: 默认值,没有定位,元素出现在正常的页面流中.

    1.4 fixed: 绝对定位,以浏览器为定位参考

  2. z-index: 数值觉得漂浮重叠优先级.数值越高优先级越高.

  3. top: 设定最近一个具有定位设置的父元素向顶部偏移.
  4. right: 设定最近一个具有定位设置的父元素向右侧偏移.
  5. bottom: 设定最近一个具有定位设置的父元素向底部偏移.
  6. left: 设定最近一个具有定位设置的父元素向顶部偏移.

漂浮居中定位设置很常用的一招.

margin: auto;  position: absolute;  top: 0; left: 0; bottom: 0; right: 0; 
ログイン後にコピー

原理及其它居中方式.

3.3 轮廓相关属性

轮廓不占页面实际物理布局面积,可实现”光晕效果”.

  1. outline: 可设置轮廓颜色 线宽 线型.
  2. outline-color: 轮廓颜色.
  3. outline-style: 和之前的border-style一致.
  4. outline-width: 轮廓宽度.
  5. outline-offset: 设置轮廓和边框的距离
4 盒模型与布局相关属性

4.1 布局相关属性

  1. float: 可left/right.当设置了该属性强制display为block,它会紧靠组件的左/右,直到遇到边框/padding/margin或另外一块组件(displ为block)为止.)
  2. clear: 设置该组件能否出现浮动组件.

    2.1 none: 默认,你随便飘~

    2.2 left: 不允许出现左飘~

    2.3 right: 不允许出现右飘~

    2.4 both: 你丫的别给我飘~.

  3. clip: 对组件裁剪设置,(只有在position为absolute且overflow:hidden,效果才会较好.)

    3.1 rect(Num_A,Num_B,Num_C,Num_D),定义一个矩形,只有在矩形内才显示出来.这4个数有点奇葩,和别的不一样,定义的矩形为,横向显示(Num_D~Num_B)的内容,纵向显示(Num_A~Num_C)的内容. 当Num为auto,表示该边不做裁剪.

  4. overflow: 设置等组件不能容纳内容显示时,采取的措施

    4.1 visble: 默认,不剪切也不加滚动条.

    4.2 auto: 添加滚动条显示全部内容.

    4.3 hidden: 裁剪不能显示的部分.

    4.4 scroll: 不够内容有没有超,总显示滚动条.

  5. overflow-x: 仅对横向方向起作用,属性同overflow.

  6. overflow-y: 仅对纵向起作用.属性同overflow.
  7. visibility: visibl/hidden.隐藏时仍占据网页空间
  8. display: 设置盒模型.

    8.1 block类型: 默认占据一行,可CSS设置宽高度,默认此属性的元素有

    ...