css基础(ife学习笔记)

àì夳堔傛蜴生んèń 2022-06-05 01:12 183阅读 0赞

# css基础(ife学习笔记) #

1.  text-decoration属性，可以跟多个属性值，并且都会实现。值得注意的是，其中的一个值为blink，现在没有主流浏览器支持。
2.  text-transform，对于文本的大小写的控制，选项值有uppercase(全部大写),capitalize(首字母大写)，lowercase(全部小写)。以及none，和inherit。
3.  text-intend：段落的首行缩进指定的数值。并且允许使用负值，首行会被缩进到左边，相当于，将盒模型中的content部分向左移动。经过试验验证，猜测text-intend的本质是把content的第一行开始的位置进行变化。
4.  text-align: 规定元素中的文本的水平对齐方式
    
    属性值：
    
     *  left：把文本排列到左边，一般是默认值
     *  right：顾名思义，排列到右边，相当于向右对齐，用过Word的应该都知道..
     *  center：居中对齐
     *  justify：这个比较神奇，两端对齐，一开始测试总是无效的，后面发现，只对英文文本有效。该属性会通过调整单词之间的空格个数实现两端对齐。等等…似乎并不是中文无效，而是中文不明显。又查了一些资料，text-align并不会处理被打断的行和最后一行，如果想要想要最后一行也实现该效果，可以人工添加一个空行..然后隐藏掉。或者使用text-aligin-last，不过并不是所有浏览器都会支持该属性。(经过验证chrome支持该属性..)
     *  inherit：不用说了
5.  word-spacing：控制单词间的空白，即字间隔。经过测试，该属性一样对中文无效。有以下属性值：
    
     *  normal：默认属性，标准间距
     *  length：指定一个值，只能为px之类的固定间距，为%时无效。且能为负值，为负值时会缩小。需要注意的是，这里指定的值是相对于原来的标准值进行变化的，而不是直接指定间距。
     *  inherit：
6.  white-space：设置如何处理元素中的空白
    
     *  normal：被浏览器忽略。默认属性。所以我们平时直接写在文本中的空格是会被忽略掉的。
     *  pre：空白(包括换行)被浏览器保留。类似`<pre>`标签.
     *  nowrap：文本不会换行，即使到达了边界，也不会换行，直到遇到br标签
     *  pre-wrap：文本会正常的换行，不会像nowrap那样直到边界也不换行，并且其中的空格和换行也会保留。感觉相当于包含了之前所有的特性..
     *  pre-line：会合并空格，但是会保留换行。相当于pre-wrap去掉了空格
     *  inherit：
7.  line-height：用于设置行间的距离，即行高。行高是指，两行文本的基线之间的距离。
    
    包括以下属性值：
    
     *  normal：默认。自动设置合理？的行间距
     *  number：设置一个数字，这个数字乘以字体的尺寸就是行间距
     *  length：设置固定的行间距。单位一般为px或者em之类。
     *  %：基于当前字体尺寸的百分比进行行高设定。其实和number类似，把百分比转化为number之后就是一模一样了。
     *  inherit：这里需要说一下，这里的继承并不是，直接继承属性，而是继承length数值。就比如说父节点属性为%，那么继承的不是这个百分比而是根据百分比和字体尺寸计算出来的像素大小。更正一下错误，上面写到的继承的是length数值是错误的，当父级元素的属性为number时，那么将直接继承数值而不是继承计算之后的出的结果。
8.  font：设置字体属性。其中可以包含所有的字体属性，即是一个组合属性。
    
    按照顺序，分别为以下属性：
    
    1.  font-style：设置字体的样式，包含以下属性：  
        
        
         *  normal：默认值，标准样式
         *  Italic：设置一个倾斜的字体样式
         *  oblique：倾斜样式，和Italic相同
         *  inherit：继承父元素
    2.  font-variant：规定字体的异体：设置文本为小型大写字母…感觉没啥用。具体属性不再介绍。
    3.  font-weight：设置字体的粗细。包含以下属性值：  
        
        
         *  normal：默认值
         *  bold：粗体字符
         *  lighter：细体字符，没有light，只有lighter。
         *  数值：100、200、300、400…900数值越大越粗，400等同于normal，700等同于bold。
         *  inherit
    4.  font-size/line-height：这里是设置字体的尺寸和行高，而不是或，两个都要设置。
    5.  font-family：规定字体系列。
    
    并不是需要按照顺序每一个值都要设置，可以不设置其中的某个值。未设置的属性，会使用默认值。

发现自己并没有真正的完整的学过一遍css，很多样式都没有用过,学过…所以也趁着这个机会好好地总结，查漏补缺一下。