#前端学习笔记#day3

27-35

网页三个部分

结构（html）

表现（CSS）

行为 (JavaScript)

 

Css 层叠样式表，css可以用来设置网页中元素的样式

 

-style内联样式

<p style="color: blueviolet; font-size: 60px;">this is my web</p>

 

-将样式写到head中的style标签中，给所有的p标签设置颜色（内部样式表，只能用在一个网页）

    <style>

        p{color: blueviolet; font-size: 60px;}

    </style>

 

-外部样式表（最佳使用方式）

可以将css样式编写到一个外部的css文件中

通过link标签引入(link写在head内)，只要想使用这个样式的网页都可以对其进行引用，使得样式可以在不同页面中复用。

 

Style.css中

p{

    color: blue;

    font-size: 80px;

}

 

文档中

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="./style.css">

    </head>

    <body>

        <p>这句话在other中</p>

    </body>

</html>

 

 

-css语法

Style区域无法用平时的注释方法，这里和普通的html不同，需要遵守css的语法

这里注释需要/* */

Css选择器

-元素选择器

       根据标签名来选择指定元素

       标签名{}

-id选择器

       根据元素的id属性选中一个元素

       #id属性值{}

       #box{}  表示选择id为box的

    <p id='p4'>笑问客从何处来</p>

       不要设置多个相同Id

 

-类选择器

       .class属性

如果选择多个id设置一样的样式，可以使用class标签，他和id类似，不同的是class可以重复使用

可以通过class属性为元素分组

       可以同时为一个元素指定多个Class属性

<h1 class=”blue abc”>表示h1有两个属性，abc和blue

 

-通配选择器

       选择页面中所有元素

       *{}

 

复合选择器

-交集选择器

       同时选择符合多个条件的元素

       选择器1选择器2选择器3{}

       交集选择器中如果有元素选择器，必须选择元素选择器开头。

       将class为red的div字体大小设置为30px (div red)相当于一个元素选择器加类选择器

div.red{font-size: 40px;}

.a.b.c{} 既是a类也是b类也是c类

 

-并集选择器(选择器分组),用时选择多个选择器对应的元素

       选择器1，选择器2{}

               h1,div{font-size: 44px;}

 

-关系选择器

父元素

       直接包含子元素的元素

子元素

       直接被父元素包含的元素

祖先元素         （比父元素范围更大，直接或者间接）

       直接或者间接包含后代元素的元素

       一个元素的父元素也是它的祖先元素

后代元素

       直接或者间接被祖先元素包含的元素

兄弟元素

       拥有相同父元素的元素

 

子元素选择器

       作用：选中指定父元素的指定子元素（选子元素）

       语法：父元素>子元素{}

后代元素选择器

       作用：选中指定元素内的指定后代元素

       语法：祖先 后代 （中间空格）

兄弟元素选择器

       作用：选择下一个兄弟

       语法：前一个+下一个

       作用：选择下边所有兄弟

       语法：兄~弟

 

属性选择器

       作用：选择含有指定属性的元素

语法：[属性名]

作用：选择含有指定属性的元素

语法：[属性名=属性值]

作用：选择含有属性值以指定值开头的元素

语法：[属性名^=属性值]  

作用：选择含有属性值以指定值结尾的元素

语法：[属性名$=属性值]

作用：选择属性值中含有某值的元素

语法：[属性名*=属性值]

 

伪类选择器（伪类：不存在的类，特殊的类）

ul表示无序列表，li表示列表项

输入ul>li，回车后会自动生成。

ul>li*5会生成五个列表项，摁tab键自动切换到下一个中间

-伪类用来描述一个元素的特殊状态

       比如：第一个子元素、被点击的状态、鼠标移入的元素。。

-伪类一般情况下都是使用：开头

       :first-child 第一个子元素

       :last-child最后一个子元素

       :nth-child(n) 选中第n个子元素 n的范围:0-无穷

                     2n或者even 表示选中偶数位的元素

                     odd 或者2n+1表示奇数位的元素

      

       :first-of-type

       :last-of-type

       :nth-of-type

              -这几个伪类的功能和上述的类似，不同的是他们在同元素中进行排序

        ul>li:nth-of-type(1){color: darkorange;}

 

       -:not() 否定伪类 将符合条件的元素从选择器中去除

        ul>li:not(:first-child){color: darkorange;}

 

a的伪类

:link表示没有访问过的链接(不可以单独调整像素)

       :visited 表示访问过的链接

 

:hover 用于表示鼠标移入的状态(可以调整像素)

 

posted @ 2021-11-19 22:15  tanyayangyang  阅读(29)  评论(0)    收藏  举报