web前端实习Day3--css选择器

目录

1.颜色设置

2.font字体设置

3.css书写位置

 4.标签选择器：标签名作为选择器的名字

5.类选择器：.类名

6.ID选择器：#id名

7.通配符选择器：*

8.后代选择器：用空格隔开，选择的是子孙后代

9.子代选择器：用>隔开，只选择亲儿子标签

10.并集选择器：用,隔开

11.交集选择器：用.隔开

12.元素分类及显示模式的转换

13.css三大特性

（1）层叠性

（2）继承性

（3）优先级

---

1.颜色设置

1 颜色单词 red blue pink hotpink ...
2 rgb(0~255 0~255 0~255) 三原色（红，绿，蓝）
3 rgba(0~255,0~255,0~255,0~1) 设置当前样色是否为透明 0表示透明 1表示不透明
4 #十六进制颜色设置 红色#f00 #ff0000

2.font字体设置

效果	属性示例	备注
字体加粗	font-weight=600	100~500不加粗 600~900加粗
字体大小	font-size:"20px"	浏览器默认字体大小是16px
字体倾斜	font-style: normall | itallic
字体	font-family：字体名称	谷歌浏览器默认的字体是微软雅黑 字体可以写英文名称 也可以写中午名称

font连写

<!-- font连写：
    font:weight style size family
    必须写size和family属性 -->

font: 50px 宋体;

3.css书写位置

css引入方式

内嵌式	开发中不用 讲课中常用	在当前html文件中 head标签内部 定义style标签 在style标签内定义css代码	没有真正实现样式与结构的分离
行内式	不建议使用	标签都有一个通用的style属性 style="css代码"	只能针对当前标签生效 没有实现结构和样式的分离
外链式	实际开发中必须使用	单独定义.css文件，在css文件里面直接写css代码（无需style标签） 需要在当前html的head标签里通过link引入这个css文件	真正实现了样式和结构的分离

<!-- 内嵌式 -->
<style>
    div{
        font-size: 100px;
        background-color: #f00;
    }
</style>

<!-- 行内式 -->
<div style="font-size: 100px">今天是学习css第一天</div>

<!-- 外链式 -->
<link rel="stylesheet" href="./mystyle.css">

 4.标签选择器：标签名作为选择器的名字

<style>
    div{
        font-size: 50px;
        background-color: #f0f;
    }
</style>

<div>标签名作为选择器的名字</div>

5.类选择器：.类名

<style>
    .box{
        color: red;
        font-size: 30px;
    }
    .blue{
        background-color: #00f;
    }
</style>

<div class="box blue">类选择器</div>

6.ID选择器：#id名

<style>
    #box{
        color:red;
    }
    .red{
        background-color: #00f;
    }
</style>

<p id="box" class="red">归来仍是少年</p>

7.通配符选择器：*

<style>
    *{
        color: red;
    }
</style>

<div>所有的我都要</div>
<p>所有的我都要</p>

8.后代选择器：用空格隔开，选择的是子孙后代

<style>
    /* 代表nav类名中的a */
    .nav a{
        color: red;
    }
    div p{
        color: red;
    }
</style>

<div class="nav">
    <a href="#">我是nav类中的a标签</a>
</div>

<a href="#">外部链接</a>

<div>
    <p>我是div中的p标签</p>
</div>

9.子代选择器：用>隔开，只选择亲儿子标签

<style>
    div>strong{
        color: red;
    }
</style>

<div>
    <strong>儿子</strong>
</div>
<div>
    <p>
        <strong>孙子</strong>
    </p>
    
</div>

10.并集选择器：用,隔开

<style>
    /* 并集选择器可以理解为和的意思 */
    div p,
    div span,
    div h1{
        font-size: 50px;
    }
</style>

11.交集选择器：用.隔开

<style>
    /* 交集选择器 既是p又是.red类选择器 */
    p.red{
        color: red;
    }
</style>

<p class="red">红色</p>

12.元素分类及显示模式的转换

块级元素	p h1~h6 ul>li ol>li dl>dt dd html body div form	独占一行 可以设置宽高
行内元素	span a i/em u/ins b/strong s/del	在一行显示不可设置宽高
行内块元素	input img	在一行显示并且可以设置宽高

css显示模式转换

display:block	转换成块级
display:inline	转换成行内
display:inline-block	转换成行内块级

<style>
    span{
        display:block;
    }
</style>

13.css三大特性

（1）层叠性

        标签的样式由选择器的样式叠加而来，共同生效

（2）继承性

        一部分样式设置给父元素的同时，子元素也会生效该样式

        关于文本设置的属性会被继承，如：color，font，其他不会

        注意：

                ①h系列标签不要继承字体大小, 否则会变得比继承的字体要大

                        因为h系列标签的默认字体大小的单位是em,是按照父元素字体大小来确定的

                ②a标签不会继承字体颜色

                        因为a标签的字体颜色是由多个伪类选择器共同生成的，

                        所以想要改变a标签的文字颜色需要选择器直接选择到a标签

（3）优先级

        标签选择器 < 类选择器 < ID选择器 < 行内样式 < !important

选择器	权重值
！important	无穷大
行内样式	1,0,0,0
ID选择器	0,1,0,0
类选择器	0,0,1,0
标签选择器	0,0,0,1

<style>
    .box{
        color: blue;
    }
    #miss{
        color: green;
    }
    div{
        color: red;
    }
</style>

<div clas="box" id="miss" style="color: skyblue">行内样式</div>
<div class="box" id="miss">ID选择器</div>
<div class="box">类选择器</div>
<div>标签选择器</div>