CSS权威指南第三版 - 1

2018-09-06  本文已影响0人  ft207741

Menu

css术语
后代选择器
h1 em {font-weight: bold; color: red;}
p em, p q {font-weight: bold; color: cyan;}

<h1>这个点我<em>正在学习</em>css</h1>
<p>个税改革尘埃落定，<em>社保费统</em>征成为<q>公众关注</q>的又一焦点。</p>

h4 > strong {font-weight: bold; color: blue;}

<h4>喜讯！<strong>宁海白枇杷</strong>，成为宁海第2个获<em><strong>国家地理</strong></em>标志登记保护的农产品</h4>
兄弟选择器
li + li {color: pink;}
ul + ol {font-weight: bold;}
body > table ol + ul {some style;}

<ul>
    <li>unorder1</li>
    <li>unorder2</li>
    <li>unorder3</li>
</ul>
<ol>
    <li>unorder1</li>
    <li>unorder2</li>
    <li>unorder3</li>
</ol>
属性选择器
p[class]{color: red;}

<p class="classvalue">1.选定某个元素，不管属性的值是什么。</p>

a[href][alt] {color: orange;}

<a href="http://domain.com" alt="alttext" />

a[href="http://www.python.org"] {color: yellow;}

<a href="http://www.python.org">python web</a>

img[src="https://www.python.org/static/img/python-logo.png"][alt="logo"] {border:6px double green;}

<img src="https://www.python.org/static/img/python-logo.png" alt="logo">

p[class~="python"] {color: blue;}

<p class="python java">Python is programming language!</p>

h1[id^="my"] {color: cyan;}

<h1 id="myidvalue">匹配所有h1标签属性有id的，并且值是my开头的；</h1>

img[src$="jpg"] {border:6px double purple}

<img src="imgpath.jpg" alt="replace_text" />

h2[class*="python"] {color: red; border:6px double red}

<h2 class="mypythonbook">通配匹配单词，只要值里有这个单词就能匹配</h2>

h3[lang|="en"] {color: orange}

<h3 lang="en-us">h3 line</h3>
伪类
a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */

a.red : visited {color: #FF0000}

<a class="red" href="css_syntax.asp">CSS Syntax</a>

p:first-child {font-weight: bold;}    /* 为每个元素第一个p元素添加style */
li:first-child {text-transform:uppercase;}   /* 为每个元素第一个li元素添加style */

<div>
<p>These are the necessary steps:</p>   <!-- 这段bold，其余p不变-->
<ul>
<li>Intert Key</li>    <!-- 这段大写-->
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>

p > i: first-child {font-weight:bold; } 

<body>
<p>some <i>text</i>. some <i>text</i>.</p>    <!-- 第一个i元素加粗-->
<p>some <i>text</i>. some <i>text</i>.</p>     <!-- 第一个i元素加粗-->
</body>

p: first-child i  {font-weight: bold }

<body>
<p>some <i>text</i>. some <i>text</i>.</p>   <!-- 所有i元素加粗-->
<p>some <i>text</i>. some <i>text</i>.</p>
</body>

q:lang(en) {quotes: "~" "~"}

<body>
<p>Some text <q lang="en">A quote in a paragraph</q> Some text.</p>
</body>

input:focus {background-color:yellow;}
伪元素
p:firstline {red: orange;}

p:first-letter {color: red; text-weight: bold;}

p.class_value:first-letter {some style}

p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

p:first-line
  {
  color:#0000ff;
  font-variant:small-caps;
  }

h1:before {content:url(picturepath);}

h1:after {content:url(picturepath);}
选择器优先级
h1{}                /* 0，0，0，1 */
p.red{}         /* 0，0，1，1 */
p em {}          /* 0，0，0，2 */
#idvalue {}        /* 0，1，0，0 */
p#idvalue {}        /* 0，1，0，1 */
div#idvalue[title]{}  /* 0，1，1，1 */
p {color:red !important;}    /* 优先级最高 */
web安全色
字体
h1 {font-family: Georgia, Times, TimesNR, 'New Century Schoolbook', serif}

p.normal {font-weight: normal}
p.thick {font-weight: bold}
p.thicker {font-weight: 900}

tag {font:italic bold 12px/2.5em arial, times, sans-serif;}

h1, h2, h3 {font: italic small-caps 1.5em serif;}
h2 {font: 18px serif;}
h3{font-size: 26px;}

等效于

h1, h2, h3 {font: italic  normal small-caps 1.5em serif;}
h2 {font: normal normal normal 18px serif;}    /* 省略部分以normal值覆盖 */
h3{font-size: 26px;}   /* font-size只会覆盖size，其它不变 */
text
p {text-indent:2em;}  /* 缩进2个字体宽度 */
p {text-indent:10%;} /* 缩进父框架的10% */
p {text-indent:32px;} /* 缩进指定像素 */
p {text-indent:-2em;} /* 缩进也可以是负数的 */

tag{justify: left [center right justfy inherit”]}
line-height 行高
p {
line-height: 200%;
font-size: 16px; line-height: 20px;
line-height: 1.5em;
}

div {line-height: 1.5;}
p {font-size: 18px;}
vertical-align 垂直对齐
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}

<p>这是一幅<img class="top" src="http://www.w3school.com.cn/i/eg_cute.gif" />位于段落中的图像。</p> 
<p>这是一幅<img class="bottom" border="0" src="http://www.w3school.com.cn/i/eg_cute.gif" />位于段落中的图像。</p>
顶底基线对齐 
img.top {vertical-align: 50%}   /* 根据父框架的line-height的50%计算值后，升高相应的计算值 如父tag的line-height是18px，就升高9px*/
img.top {vertical-align: -30px}   /* 下降30px */

p {word-spacing: 0.5em;}

h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}

h1 {text-transform:uppercase}
h2 {text-transform:capitalize}
p {text-transform:lowercase}

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}  /* 已经废弃 */

    span {text-shadow: blue 0.5px 0.25px 0.25px;} /* args:阴影颜色 右距离 下距离 模糊距离 (如果右 和 下参数为负,那么就是定义左 和 上）

tag {direction:rtl; unicode-bidi:bidi-override; }
第七章 基本视觉格式化
span {padding: 20px 0; border:10px solid; background-color: yellow;}
应用背景还是能看到内边距 run-in
上一篇下一篇

猜你喜欢

热点阅读