(第九天)id与class的区别及CSS样式之背景、文本、字体、

作者: IOLG | 来源:发表于2016-10-25 20:59 被阅读41次

(第九天)id与class的区别及CSS样式之背景、文本、字体、
从零开始学CSS - 样式
CSS-Style样式
day03 css基本样式 + 表格table + 轮廓 + 透
day03
day03
day03
python Css选择器
Python HTML和CSS 4：CSS常用文本样式与样式选择
九、CSS字体属性与文本属性

id与class的区别

id：一对一先找到结构与内容，再给其定义样式
class：一对多先定义好一种样式，再套给多个结构/内容

背景样式

背景属性：

background-color：规定要使用的背景颜色。
background-position：规定背景图像的位置。
background-size：规定背景图片的尺寸。
background-repeat：规定如何重复背景图像；默认值repeat。
background-origin：规定背景图片的定位区域，position的位置及背景图片的相对基点由该属性决定。默认值为padding-box；如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果
background-clip：规定背景颜色的绘制区域，不改变position与背景图片的位置相对起始点（由background-origin属性决定）。默认值为border-box
background-attachment：规定背景图像是否固定或者随着页面的其余部分滚动。
1. 固定的情况下：background-position会根据浏览器定位
2. 非固定的情况下：background-position会根据元素本身定位
3. fixed(固定)情况下，背景图像超出元素范围不显示*/
background-image：规定要使用的背景图像；多张图片可通过,隔开，其他属性按图片顺序依次匹配，同样按,隔开。

属性代码示例1：

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .bgcolor {
        width: 1000px;
        height: 1000px;
        background-color: #ccc;
    }
    
    .bgimage {
        margin-left: 50px;
        padding: 100px;
        width: 1000px;
        height: 500px;
        background-color: #ffc;
        /* 背景图片 */
        background-image: url('submit.gif');
        /* 不允许重复，默认值是允许重复 */
        background-repeat: no-repeat;
        /* 背景图片显示的位置，图片显示在范围内的右边，从图片的顶部开始显示(可以将height设置小一点看效果) */
        /* background-position: right center; */
        /* background-position也可以通过像素、百分比实现，从bgimage容器中的100(从左到右，百分比也是同理),20(从上到下，百分比也是同理)像素处开始显示 */
        background-position: 100px 20px;
        /* 背景图像固定，不随内容滚动,直到被其他容器覆盖 */
        background-attachment: fixed;
        /* CSS3新增属性 规定背景图片的尺寸 200宽 100高*/
        background-size: 200px 100px;
        /* CSS3新增属性 规定 background-position 属性相对于什么位置来定位 */
        /* 如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。 */
        /* 该属性没有继承性 */
        /* background-origin: padding-box相对于内边距|border-box相对于border外边距|content-box相对于内容框; */
        /* 因为有padding: 100px的属性，所以实际的position为200px 120px; */
        /* 效果查看：http://www.w3school.com.cn/tiy/c.asp?f=css_background-origin */
        background-origin: content-box;
        /* CSS3新增属性 规定背景的绘制区域 */
        /* 属性值与origin一样；无继承性;有attachment属性也一样有效*/
        background-clip: content-box;
    }
    </style>
</head>

<body>
    <div class="bgcolor">
        <div class="bgimage">
            <p>随意输入的内容</p>
            <p>随意输入的内容</p>
            <p>随意输入的内容</p>
            <p>随意输入的内容</p>
            <p>随意输入的内容</p>
            <p>随意输入的内容</p>
            <p>随意输入的内容</p>
            <p>随意输入的内容</p>
            <p>随意输入的内容</p>
        </div>
    </div>
</body>

代码示例2：clip、origin、size

<head>
    <meta charset="UTF-8">
    <title>背景相关属性clip-origin-size</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        strong {
            color: #ff0000;
            display: block;
            margin: 0.8em 0em;
        }

        .inline_block {
            display: inline-block;
            /*inline-block的对齐方式vertical-align是根据默认baseline来排列的，
            baseline是通过vertical-align来设置的，如top bottom middle等*/
            /*如果不添加该属性，inline-block的元素排列有时候会出现上下不一致*/
            vertical-align: top;
            /*display:inline-block元素间会有间隙，所以使用-margin解决；
            或者不使用inline-block，直接用float解决*/
            margin-left: -9px;
            margin-right: 1em;
            background-color: yellow;
            padding: 5px;
        }

        /*第一个inline-block元素不需要添加-margin，因没有间隙*/
        .first_inline_block {
            margin-left: 0px;
        }

        .background_clip div, .background_origin div {
            background: url("../public/img/2.jpg") #333333 no-repeat;
            color: #ffff00;
            width:200px;
            height: 100px;
            text-align: center;
            border: 1em dashed #0000ff;
            /*规定背景图像的大小*/
            background-size: 50px;
            padding: 1em;
        }

        /*若下方选择器存在统一的样式，如.background_clip div；
        这个统一样式前面跟了父元素，那么下方的选择器也需要跟上父元素，否则无效；
        若.background_clip div修改为.border_box,.padding_box,.content_box，那么下方只需写.border_box即可，
        不需要加上父元素*/
        .background_clip .border_box {
            -webkit-background-clip: border-box;
            background-clip: border-box;
        }

        .background_clip .padding_box {
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
        }

        .background_clip .content_box {
            -webkit-background-clip: content-box;
            background-clip: content-box;
        }

        .background_origin .border_box {
            -webkit-background-origin: border-box;
            background-origin: border-box;
        }

        .background_origin .padding_box {
            -webkit-background-origin: padding-box;
            background-origin: padding-box;
        }

        .background_origin .content_box {
            -webkit-background-origin: content-box;
            background-origin: content-box;
        }
    </style>
</head>
<body>
<h2>background-clip 规定背景颜色绘制范围的属性</h2>
<strong>该属性不改变背景绘制起始点，只规定背景绘制的范围</strong>
<div class="background_clip">
    <section class="inline_block first_inline_block">
        <h3>background-clip:border-box</h3>
        <div class="border_box">背景绘制区域包含border</div>
    </section>
    <section class="inline_block">
        <h3>background-clip:padding-box</h3>
        <div class="padding_box">背景绘制区域包含padding，不包含border</div>
    </section>
    <section class="inline_block">
        <h3>background-clip:content-box</h3>
        <div class="content_box">背景绘制区域包含content，不包含border、padding</div>
    </section>
</div>
<br/>
<hr/>
<h2>background-origin 规定背景图片从相对位置开始绘制的属性</h2>
<strong>该属性规定背景图片绘制的相对起始点</strong>
<div class="background_clip background_origin">
    <section class="inline_block first_inline_block">
        <h3>background-clip:border-box</h3>
        <h3>background-origin:border-box</h3>
        <div class="border_box">背景图片绘制起始点从border边缘开始</div>
    </section>
    <section class="inline_block">
        <h3>background-clip:padding-box</h3>
        <h3>background-origin:padding-box</h3>
        <div class="padding_box">背景图片绘制起始点从padding外沿开始</div>
    </section>
    <section class="inline_block">
        <h3>background-clip:content-box</h3>
        <h3>background-origin:content-box</h3>
        <div class="content_box">背景图片绘制起始点从content外沿开始</div>
    </section>
</div>
</body>

代码示例2效果图

文本样式

文本属性

color：文本颜色
line-height：文本行高
letter-spacing：字符间距
word-spacing：单词间距
text-align：文本水平对齐方式
text-decoration：文本修饰，如下划线、删除线等；多属性值可同时使用，即同时拥有多种修饰
text-indent：文本首行缩进
text-transform：文本大小写转化
- capitalize：每个单词首字母大写
- uppercase：所有字母都为大写
- lowercase：所有字母都为小写
direction：文本的书写方向，默认为ltr(从左到右)；当文档中使用lang="ar" (即语言设置为阿拉伯语)时，无需搭配unicode-bidi属性即可实现direction指定的文字书写方向；其他语言中，若没有unicode-bidi配合，则与text-align显示的效果一样
unicode-bidi：unicode-bidi 属性与direction属性一起使用，来设置或返回文本是否被重写，以便在同一文档中支持多种语言。该属性为不可动画属性<small>(即不可在动画属性中使用该属性)</small>
- normal：对象不打开附加的嵌入层，对于内联元素，隐式重排序跨对象边界进行工作。
- embed：创建一个附加的嵌入层，direction属性的值指定嵌入层，在对象内部进行隐式重排序。
- bidi-override：创建一个附加的嵌入层，严格按照direction属性的值重排序。忽略隐式双向运算规则。
如在unicode-bidi:bidi-override属性的元素下让对象内部进行隐式重排序(即按输入的文本排序)，可以通过给该子元素添加unicode-bidi:embed属性值完成
white-space：设置如何处理元素内的空白
word-wrap：属性允许长单词或 URL 地址换行到下一行
word-break：属性规定自动换行的处理方法
text-shadow：设置文本阴影效果，4个参数x,y,blur,color

white-space、word-wrap、word-break的区别（代码示例）：

<head>
    <meta charset="UTF-8">
    <title>white-space、word-wrap、word-break的区别</title>
    <style>
        p.test1 {
            /*单词级：先根据浏览器默认的方式处理换行，
            再根据单词的换行方式进行处理*/
            word-wrap: break-word;
        }

        p.test2 {
            /*浏览器级*/
            word-break: break-all;
        }

        p.test3 {
            /*浏览器级*/
            white-space: nowrap;
        }

        p {
            width: 11em;
            border: 1px solid #000000;

        }
    </style>
</head>
<body>
<h3>word-wrap:break-word; </h3>
<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<h3>word-break:break-all; </h3>
<p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<h3>white-space:nowrap;</h3>
<p class="test3">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<h3>默认情况</h3>
<p>This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p><b>注释：</b>目前 Opera 不支持 word-break 属性。</p>
</body>

上述代码示例效果图

direction、text-aligin与unicode-bidi的用法（代码示例）

<head>
    <meta charset="UTF-8">
    <title>direction与unicode-bidi用法</title>
    <style>
        section {
            border: 1px solid;
            margin-top: 10px;
        }

        .direction {
            /*规定文字方向为从右到左*/
            direction: rtl;
        }

        .align {
            /*设置文本水平对齐方式为left*/
            text-align: left;
        }

        .bidi-override {
            /*创建一个附加的嵌入层，并严格按照direction属性值排序*/
            unicode-bidi: bidi-override;
        }

        .embed {
            /*创建一个附加的嵌入层，并将对象进行隐式重排序*/
            unicode-bidi: embed;
            color: #f00;
        }

    </style>
</head>
<body>
<section>
    <h3>阿拉伯语言与非阿拉伯语言下的direction属性：
        <small>下方 1 2 3 4 5 6 为阿拉伯语</small>
    </h3>
    <p class="direction">
        1 2 3 4 5 6 阿拉伯语自动根据direction指定方向排序，其他语言内部进行隐式重排序；
        若没有设置水平对齐方向，则根据direction设置水平对齐
    </p>
    <p class="direction align">
        1 2 3 4 5 6 阿拉伯语自动根据direction指定方向排序，其他语言内部进行隐式重排序；
        若设置了水平对齐方向，则根据text-align设置水平对齐
    </p>
</section>
<section>
    <h3>非阿拉伯语情况下通过unicode-bidi实现根据direction属性排序</h3>
    <p class="direction">只有direction:rtl的情况</p>
    <p class="direction align">只有direction:rtl与text-align:left的情况</p>
    <p class="direction bidi-override">direction:rtl与unicode-bidi:bidi-override的情况</p>
    <p class="direction bidi-override">direction:rtl与unicode-bidi:bidi-override的情况,<span
            class="embed">这部分文字按代码书写顺序排序</span></p>
</section>
</body>

上述代码示例效果图

文本样式综合代码示例

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    p {
        height: 40px;
        margin-top: 20px;
        background-color: #ccc;
        width: 380px;
    }
    
    .color {
        color: #ff0;
    }
    
    .direction {
        direction: rtl;
    }
    
    .direction span {
        display: inline-block;
    }
    
    .textAlign {
        text-align: right;
    }
    
    .lineHeight {
        line-height: 40px;
    }
    
    .letterSpacing {
        letter-spacing: 1em;
    }
    
    .wordSpacing {
        word-spacing: 1em;
    }
    
    .decoration {
        /*多属性值可同时使用*/
        text-decoration: line-through overline;
    }
    
    .textIndent {
        text-indent: 1em;
    }
    
    .textTransform {
        text-transform: uppercase;
    }
    
    .whiteSpace {
        /* 多的空格合并，但不换行;默认会换行 */
        white-space: nowrap;
    }
    
    .textShadow {
        /*设置文本阴影效果，x、y坐标偏移量、模糊程度，阴影颜色*/
        text-shadow: 0.3em 0.3em 0.1em #f00;
    }
    
    .overflowWrap {
        overflow-wrap: break-word;
    }
    </style>
</head>

<body>
    <div>
        <section>
            <h2>CSS文本</h2>
            <p class="color">color</p>
            <p class="direction">
                <span>direction:rtl</span><span>下</span><span>块</span><span>元</span><span>素</span><span>从</span><span>右</span><span>向</span><span>左</span>
            </p>
            <p class="textAlign">text-align 文本整体位于右侧</p>
            <p class="lineHeight">line-height=height的效果</p>
            <p class="letterSpacing">letter spacing 字符间距</p>
            <p class="wordSpacing">word spacing 单词间距</p>
            <p class="decoration">text-decoration </p>
            <p class="textIndent">text-indent 首行缩进</p>
            <p class="textTransform">text-transform，原小写全转换为大写</p>
            <p class="whiteSpace">white-space nowrap 空白处理方式 这里不换行这里不换行这里不换行这里不换行这里不换行</p>
            <p class="textShadow">CSS3新增属性 text-shadow</p>
            <p class="overflowWrap">werwerjlsdjfksjkdlfjsldjfksdlfjksdfjwerwerjlsdjfksjkdlfjsldjfksdlfjksdfj当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行</p>
        </section>
    </div>
</body>

上述代码示例效果图

自定义字体

使用@font-face定义自定义字体，请看如下代码示例：

    <style>
        @font-face {
            /*定义自定义字体名称为myfont*/
            font-family: myfont;
            /*自定义字体源  local表示客户端字体*/
            src: local("Arial111"),
            /*local可以存在多个，也可以不存在；不存在的情况下直接调用服务端字体*/
                local("Verdana111"),
            /*url表示自定义(服务端)字体地址*/
                url("../public/font/myfont.ttf"),
            /*url可以存在多个，1是考虑到字体不存在可以引用下一个，2是考虑到浏览器不兼容的情况可以使用下一个*/
                url("../public/font/myfont.otf");
        }
        p{
            /*使用自定义的字体myfont*/
            font-family:myfont;
        }
    </style>

链接样式

链接的四种状态：

a:link 未被访问过的链接，链接的原始状态
a:visited 已经被访问过的链接状态
a:hover 鼠标移动到链接上时的状态
a:active 鼠标移动到链接上并按下时(未抬起)的状态

列表样式与表格样式

列表样式属性

list-style: 简写列表项样式
list-style-image: 列表图标的图片，无法设置大小，只占默认空间大小
list-style-position: 列表图标位置，指定列表图标放置的位置(inside:在内容区域内，outside[默认]:在内容区域外)
list-style-type: 列表图标的形状，存在list-style-image时，此属性无效

list-style-image不可以设置图片大小，但是css3中background-image可以设置大小，所以可以将list-style设置为none，通过背景样式来实现列表项图像标志的大小

表格样式属性

border-collapse：折叠表格边框的属性，若值为collapse，则table、tr、td的边框合并，合并后的border样式决定关系如下：

table、tr、td都设置border样式，外边框和横线由tr决定，内竖线由td决定
只有table和td设置了border样式，外边框由table决定，其他都由td决定
只有td设置了border样式，全有td决定表格边框样式

代码示例：

    table,
      th,
      td {
          padding: 5px;
          text-align: center;
      }

      td, th {
          border: 1px dotted #ff0000;
      }

      tr {
          /*未折叠状态下，tr的border不会显示*/
          border: 1px solid #0000FF;
      }

      table {
          border: 1px solid #000;
      }

      table {
          /* 折叠border，table、tr、td的边框折叠成一条
           * 折叠后的border样式：
           * 1.table、tr、td都设置border样式，外边框和横线由tr决定，内竖线由td决定
           * 2.只有table和td设置了border样式，外边框由table决定，其他都由td决定
           * 3.只有td设置了border样式，全有td决定表格边框样式*/
          border-collapse: collapse;
      }

![未折叠前的状态](https://img.haomeiwen.com/i1299322/9ced45618956193c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![折叠后的状态](https://img.haomeiwen.com/i1299322/0f527b6903993813.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

##轮廓样式outline
该样式在盒子模型成位于最外层，即在border之外，且不会被文档流计入宽高。在chrome中，当搜索栏处于获取焦点的状态时，可见外面的一个轮廓就是chrome针对input获取焦点时默认的outline样式
#####代码示例
```html
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        p {
            /* 轮廓outline 属性值依次为颜色 线条样式 线条宽度(粗) */
            outline: #ff0 dashed 10px;
            border: #000 dotted 10px;
        }

        input {
            border: 5px solid;
            /*获取焦点后，input会被渲染上浏览器默认的轮廓样式，通过自定义轮廓样式取消*/
            outline: none;
        }

        input:focus {
            outline: #ff0000 dotted 5px;
        }
    </style>
</head>

<body>
<p>轮廓:轮廓的粗细不影响元素的宽高，而border会影响元素的宽高；轮廓在border之外</p>
<input type="text" placeholder="获取焦点后显示轮廓">
</body>

上述代码示例效果图

input获取焦点时的效果图

(第九天)id与class的区别及CSS样式之背景、文本、字体、
id与class的区别 id：一对一先找到结构与内容，再给其定义样式 class：一对多先定义好一种样式，再套...
从零开始学CSS - 样式
样式 CSS 背景属性 CSS 文本属性 CSS 字体属性链接常见的链接样式，text-decorat...
CSS-Style样式
CSS 样式背景文本字体链接列表表格轮廓 end
day03 css基本样式 + 表格table + 轮廓 + 透
1.css基本样式 1.1 css背景 1.2 css文本 1.3 css字体 1.4 css链接 1.5 css...
day03
A今天学了什么？ 1.CSS基本样式讲解 1.1css背景样式 1.2CSS文本 1.3CSS字体 1.4.css...
day03
A今天学到了什么 1.css基本样式 1.css背景 2.css 文本 3.css 字体 4.css 列表样式...
day03
今天学的内容一、css 样式的讲解 1.1 css 背景 1.2 css 文本 1.3 css 字体 1.4 c...
python Css选择器
一、常用的应用文本的css样式 1.1、文本的css样式其实也就是给一段文本设置字体大小、颜色、背景色、是否加粗...
Python HTML和CSS 4：CSS常用文本样式与样式选择
一、常用的应用文本的css样式 1.1、文本的css样式其实也就是给一段文本设置字体大小、颜色、背景色、是否加粗...
九、CSS字体属性与文本属性
一、CSS字体属性与文本属性 1、CSS字体属性 CSS Fonts（字体）属性用于定义、大小、粗细、和文字样式（...