3.20 CSS属性及选择器

作者: 苏打丶观 | 来源:发表于2017-03-20 23:46 被阅读0次

3.20 CSS属性及选择器
css
前端 (2)
CSS
CSS
CSS选择器（转载）
css学习笔记
CSS选择器
CSS选择器
第四天,背景边框列表链接和更复杂的选择器

<h3>CSS基础知识</h3>
<h5>一、用处</h5>
在前端开发中，CSS只有一个作用，就是用来<strong>修改样式</strong>
<h5>二、格式</h5>
外链样式表
<link href="mystyle.css" rel="stylesheet" type="text/css">
内部样式表

<style type="text/css">
        标签名/id名/类名   {
                              属性:值;
                                  }
</style>

内嵌样式表
<p style="color: sienna;margin-left: 20px;">
<h6>注意：</h6>

style标签必须写在head标签的开始标签和结束标签之间
style标签中的type属性其实可以不用写，默认就是type="text/css"
设置样式时必须按照固定格式来设置，注意标点符号，不能省略

font-style（fs+tab）：规定文字的<strong>样式</strong>
font-weight（fw+tab）：规定文字的<strong>粗细</strong>
3.font-size/line-height（fz/lh+tab）：规定文字的<strong>大小/行高</strong>
font-family（ff+tab）：规定文字的<strong>字体</strong>
简写：font：style weight size/lineheight family
注意属性值之间用空格隔开，其中前两个可以不写，默认值是normal，顺序也可以颠倒，但是后两个必须填写且位置不能变

文字的粗细可以用英文单词赋值，也可以是100-900<strong>整百</strong>的数字，100最细，900最粗
文字的字体如果是中文需要用<strong>" "</strong>或者<strong>' '</strong>包起来。字体必须是电脑里已安装的字体，如果设置的字体不存在，系统会使用默认的字体（宋体）来显示，字体可以填写多个用来设置备选方案
由于中文字体中包含英文字体，英文字体中却不包含中文，为了中文和英文字体不一样，可以把英文字体写在前面，中文字体写在后面，然后用<strong>，</strong>隔开
企业开发中常用字体：
中文：宋体、黑体、微软雅黑
英文：Times New Roman、Arial
并不是名称是英文就一定是英文字体，取决于它是否能够处理中文

text-decoration(td+tab)：规定文本的装饰
text-align(ta+tab)：规定文本的对齐方式
text-indent(ti+tab)：规定文本首行缩进（2em）

<h5>五、颜色属性</h5>
color=red：英文单词赋值
color=rgb(255,0,0)：三原色赋值，分别代表红绿蓝，0代表不发光，255代表最亮，值越大越亮，注意用逗号隔开
color=rgba(255,0,0,0)：三原色赋值的同时a控制透明度，取值范围0-1，0为完全透明，1为不透明，注意用逗号隔开
color=#FF0000：十六进制颜色赋值，FF=R，00=G，00=B
十六进制转十进制：十六进制数的第一位*16+第二位数=十进制数
color=#F00：十六进制颜色赋值的缩写，每两位的值都是一样的就可以简写为一个数。
<h5>六、标签选择器</h5>

根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性
格式：标签名{ }
标签选择器选中的是当前界面中所有的标签，不管隐藏的多深，但是不能单独选中某一个标签，
只要是html中的标签都可以作为便签选择器

<h5>七、id选择器</h5>

根据指定的id名称找到对应的标签，然后设置属性
格式：#id名{ }
每个html标签都有一个id属性：id=" "
id相当于人的身份证号码，在当前界面中不能重复
id名称是有规范的，只能由字母，数字和下划线组成。不能是html标签名，而且数字不能开头
在企业开发中一般情况下仅仅是为了样式我们不会使用id选择器，id选择器是留给JS用的

根据指定的类名称找到对应的标签，然后设置属性
格式：.类名{ }
每个html标签都有一个class属性：class=" "
同一界面中class的名称是可以重复的
类名的命名规范和id名的命名规则一样
一个标签可以绑定多个类名，两个类名之间必须用空格隔开：class="类名1 类名2"

<h5>九、后代选择器</h5>

根据指定的名称找到所有的后代标签，然后设置属性
格式：名称1 名称2{ }
两个名称之间必须用空格隔开，可以无限延续下去
后代不仅仅指儿子，也包括孙子/重孙等，只要是在父标签内的指定标签都会被设置
两个名称可以是标签名，id名和类名

<h5>十、子元素选择器</h5>

根据指定的名称找到特定的直接子元素，然后设置属性
格式：名称1>名称2{ }
两个名称之间必须用 > 隔开，不能有空格，可以无限延续下去
子元素选择器只会找到指定直接的子标签
两个名称可以是标签名，id名和类名

<h5>十一、交集选择器</h5>

给所有选择器选中的标签中相交的那部分标签设置属性
格式：名称1名称2{ }
两个名称之间没有任何符号
作为了解，企业开发少用
两个名称可以是标签名，id名和类名

<h5>十二、并集选择器</h5>

给所有选择器选中的标签设置属性
格式：名称1,名称2{ }
两个名称之间必须用 , 隔开，不能有空格，可以无限延续下去
两个名称可以是标签名，id名和类名

<h5>十三、兄弟选择器</h5>
<h6>相邻兄弟选择器</h6>

给指定名称选择器后面紧跟着的标签设置属性
格式：名称1+名称2{ }
两个名称之间必须用 + 链接，不能有空格
两个名称可以是标签名，id名和类名

<h6>通用兄弟选择器</h6>

给指定名称选择器后面的所有的指定名称标签设置属性
格式：名称1~名称2{ }
两个名称之间必须用 ~ 链接，不能有空格
两个名称可以是标签名，id名和类名

<h5>十四、序选择器</h5>
css3中新增的选择器最具代表性的就是序选择器
<h6>同级别的第几个</h6>
名称:first-child{ }：选中同级别中的第一个标签
名称:last-child{ }：选中同级别中的最后一个标签
名称:nth-child(x){ }：选中同级别中的第x个标签
名称:nth-last-child(x){ }：选中同级别中的倒数第x个标签
名称:only-child{ }：选中父元素中指定的只有唯一的一个的子元素标签，只能有一个标签
名称:nth-child(odd){ }：选中同级别中所有的奇数标签
名称:nth-child(even){ }：选中同级别中所有的偶数标签
名称:nth-child(xn+y){ }：n为计数器，从0开始计数。x和y为指定数字，当x为2，y为0时即为所有偶数项，当x为2，y为1时即为所有奇数项，以此类推，选中同级别中满足计算结果的指定标签
注意：不区分类型

<h6>同级别同类型的第几个</h6>
名称:first-of-type{ }：选中同级别中同类型的第一个标签
名称:last-of-type{ }：选中同级别中同类型的最后一个标签
名称:nth-of-type(x){ }：选中同级别中同类型的第x个标签
名称:nth-last-of-type(x){ }：选中同级别中同类型的倒数第x个标签
名称:only-of-type{ }：选中父元素中指定的同一个类型的标签，可以有多个标签但只能有一个指定的类型标签
名称:nth-of-type(odd){ }：选中同级别中同类型的所有的奇数标签
名称:nth-of-type(even){ }：选中同级别中同类型的所有的偶数标签
名称:nth-of-type(xn+y){ }：选中同级别中同类型的满足计算结果的指定标签

<h5>十五、属性选择器</h5>
名称[attribute]：根据指定的属性名称找到对应的标签，然后设置属性
名称[attribute=value]：根据指定的属性名称并且属性取值等于value，找到对应的标签，然后设置属性。主要用于区分input属性
名称[attribute^=value]：根据指定的属性名称并且属性取值开头value，找到对应的标签，然后设置属性。
名称[attribute$=value]：根据指定的属性名称并且属性取值结尾等于value，找到对应的标签，然后设置属性。
名称[attribute*=value]：根据指定的属性名称并且属性取值包含value，找到对应的标签，然后设置属性。

<h5>十六、通配符选择器</h5>