css样式

最新推荐文章于 2024-09-10 22:55:28 发布

struggling888

最新推荐文章于 2024-09-10 22:55:28 发布

阅读量267

点赞数

分类专栏： css权威指南-第三版文章标签：文本-浮动-字体 css

本文链接：https://blog.csdn.net/struggling888/article/details/68062345

版权

css权威指南-第三版专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css字体样式

1.font-family:wedgie,’karrank%’
font-family中有可以有备用字体，只需要用逗号隔开，当其中的字体有空格或者特殊符号时要用加引号

2.font-weight:nomal/bold/bolder/lighter/100/200…
字体加粗

3.font-style:italic/oblique/normal
斜体，倾斜字体

4.font-variant：small-caps/nomal
字体变形（小型大写字母）

5.font-stretch:wider/narrower/ultra-condensed/extra-condensed/condensed/semi-condensed/
字体拉伸变瘦或变胖

6.font：bold italic 18px/1.2 Arial,Verdana
font-size和font-family值是必须的，而且顺序不能变，

7.@font-face{font-family:”Scarborough Fair；src:url( )}
可以通过@font-face规则对字体匹配

css文本样式

1.text-index:
元素第一行都可以缩进一个给定的长度，该长度可以是负值
只可用于块级元素，
例：p{text-index:3em;}

2.vertical-align:top/middle/bottom/sub/super
垂直对齐

3.word-spacing:
字间间隔（每个字符或者单词之间的间隔）

4.letter-spacing
字母间隔（每个字符或字母的间隔）

5.text-transform:uppercase/lowercase/capitalize/
文本准换全大写/全小写/只对每个单词的首字母大写，

6.white-space:normal/nowrap/pre/pre-wrap/pre-line/
处理空白符
normal 合并空白符，忽略换行符，允许自动换行
nowrap 合并空白符，忽略换行符，不允许自动换行
pre 空白符，换行符不会被忽略，不允许自动换行
pre-wrap 保留空白符和换行符，允许自动换行
pre-line 合并空白符，保留换行符

7.direction：ltr/rtl
unicode-bidi:embed/bidi-override
文本方向,两者一起使用可以设置或返回文本是否被重写，以便在同一文档中支持多种语言

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"> 
    <script>
    function displayResult(){               document.getElementById("p1").style.unicodeBidi="bidi-override";
    }
    </script>
</head>
<body>
    <p>这是一些文本。</p>
    <p id="p1" style="direction:rtl">这是另一些文本。</p>
    <br>
    <button type="button" onclick="displayResult()">覆盖文本   </button>
</body>
</html>

8.display:
run-in 把元素格式化为下一个元素中的行内框（如果一个元素生成了run-in框，而且该框后面是一个块级框，那么run-in元素将成为块级框开始出处的一个行内框，从上一个父级中继承属性）;
inline-table定义行内及表，最接近的元素是table;
table-row指定一个元素是一个单元格的行,最接近的元素是tr;
table-row-group一个或多个行的组，最接近的元素是tbody;
table-header-group最接近的元素是thead;
table-footer-group最接近的元素是tfoot;
table-column一个单元格的列，最近的元素是col;
table-column-group一个单元格的多列
table-cell每个单元格；
table-caption定义表的总标题，一个表中不要放多个有此属性得元素；

9.background:
如果background-position有两个值则必须水平值在前，垂直值在后，

10.float：
1.一个元素浮动时，其他内容会环绕该元素；
2.如果要浮动一个非替换元素，则必须给该元素声明一个宽，

替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。
比如：<input type="text"/>这是一个文本输入框，换一个其他的时候，浏览器显示就不一样

HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。
3.float:none;防止元素浮动；要得到非浮动行为，必须有这个值，如果没有，所有元素都会以某种方式浮动，

4.浮动元素的包含块是其最近的块级祖先元素。浮动元素会生成块级框，所以没必要声明display:block

11.visibility:hidden
元素隐藏，保留位置；display:none 隐藏不保留位置

**12.counter-reset:
counter-increment:**
计算器重置o1{counter-reset:chapter 0}计算器重置为0
增加计数器ol{counter-increment:ordered}计算器生成有序数字计数

例：
<style type="text/css">
#demo1 ol { counter-reset: section; list-style-type: none; }
#demo1 ol li { counter-increment: section; }
#demo1 ol li:before { content: counters(section, ".") ". "; }
</style>
<div id="demo1">
    <ol>
        <li>进风口的爽肤水
            <ol>
                <li>非进口商的</li>
                <li>非进口商的</li>
                <li>非进口商的</li>
            </ol>
        </li>
        <li>进风口的爽肤水
            <ol>
                <li>非进口商的</li>
                <li>
                    非进口商的
                    <ol>
                        <li>将咖啡色的开发商</li>
                        <li>将咖啡色的开发商</li>
                        <li>将咖啡色的开发商</li>
                        <li>将咖啡色的开发商</li>
                    </ol>
                </li>
                <li>非进口商的</li>
            </ol>
        </li>
        <li>进风口的爽肤水</li>
    </ol>
</div>

解释：
初始化计数器：
首先，给我们的计数器取一个名字，这个名字可以随便取，比如这里叫section，然后使用counter-reset在你需要开始计数的地方重置计数器。ol { counter-reset: section; }(section后可设起始数)

计数器自增:
然后通过counter-increment指定计数器何时自增，比如这里是碰到li就自增，所以我们写在li上面。ol li { counter-increment: section; }

显示计数器:
显示计数器有2种方式，counter和counters
counter(计数器名称[, 可选的显示风格])
counters(计数器名称, 嵌套时拼接字符串[, 可选的显示风格])
ol li:before { content: counter(section, upper-roman) “. “;}
ol li:before { content: “我是字符串1” counters(section, “.”) “我是字符串2” “我是字符串3”; }