ホームページ > ウェブフロントエンド > htmlチュートリアル > クレイジーな Html+CSS+JS CSS summary_html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース: 2016-06-24 11:34:43
オリジナル
1171 人が閲覧しました

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设置宽高度,默认此属性的元素有

    ...