前端学习笔记第二部分-CSS

最新推荐文章于 2024-10-18 00:36:42 发布

原创最新推荐文章于 2024-10-18 00:36:42 发布 · 756 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端开发 #CSS #学习笔记

学习笔记同时被 2 个专栏收录

19 篇文章

订阅专栏

前端开发

13 篇文章

订阅专栏

这篇博客详细介绍了CSS的基础知识，包括CSS初识、字体样式、类选择器与ID选择器、伪类选择器以及外观属性。强调了通过实践来巩固CSS知识的重要性，并提醒读者将学到的内容应用到实际项目中。

1、CSS初识

css通常称为css样式表或者层叠样式表，主要我你故意设置HTML页面中的文本内容、图片的外形

以及版面的布局等外观显示样式。

css的样式规则，具体格式如下：

h1 {color：red; font-size：25px; }

选择器属性值属性值

选择器用于指定css样式作用的HTML对象，花括号内是对该对象设置的具体样式；

属性和属性值以键值对的形式出现；

多个键值对之间用英文" ; "进行区分。

2、css字体样式属性：

<style>
h1{
            /*这是css的注释*/
    font-size:14px;
    color:pink;
    font-family:"Microsoft YaHei",arial
    font-weight:700;
}
span{
    font-weight:bold;      /*字体粗细*/
    font-style:italic;         /*字体样式 normal italic*/
}
h2{
      /*font的综合设置  选择器{font：font-style font-weight font-size  font-family} 
         顺序不能变，不需要的属性可省略，但必须保留font-size和font-family属性*/
    font:italic  bold  14px  "微软雅黑";
}
</style>

3、类选择器和ID选择器：

<style>
.yangshi{          /*声明类样式*/
    font-size:15px;
}
.color-red{         /*类选择器*/
    color:red;
}
.pink{
    color:pink;
}
                 /*id选择器*/
#big{            /*类选择器和id选择器一起记忆*/
    color:purple;
}
</style>

<body>
    <div class="yangshi"> 标签 </div>      /*引用类样式*/
    <div class="color-red"> 类选择器 </div>
    <div class="yangshi pink "> 类选择器 </div>   /*多类名选择器 用空格隔开*/
    <div id="big">id选择  </div>
</body>

区别：类选择器可以重复多次使用，id选择器是唯一的id，不可重复使用。

4、伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。

链接伪类选择器

<style>
    a:link{
        font-size:16px;       /*未访问的链接*/
        color:gray;
        font-weight:700;
    }
    a:visited{                /*已访问的链接*/
        font-size:16px;
        color:orange;
        font-weight:700;
    }
    a:hover{                /*鼠标移动到链接上*/
        font-size:16px;
        color:red;
        font-weight:700;
    }
    a:acyive{                /*选定的链接 点击别松开的状态*/
        font-size:16px;
        color:green;
        font-weight:700;
    }
</style>

<body>
<!--链接伪类选择器-->
<div> 
    <a href="##">秒杀 </a>
    <a href="##"> 抢购</a>
</div>
</body>

结构伪类选择器：

<style>
    li:first-child{
        color:pink;
    }
    li:last-child{
        color:purple;
    }
    li:nth-child(4){
        color:blue;
    }
    li:first-child(odd){         /*可以选择所有的odd奇数元素标签 2n+1一样的效果*/
        color:pink;
    }
    li:first-child(even){         /*可以选择所有的even偶数元素标签  2n一样的效果*/
        color:pink;
    }
    li:nth-last-child(even){         /*:nth-last-child从最后一个元素开始数*/
        color:white;
    }
</style>

<body>
    <ul>
        <li>第一个元素</li>
        <li>第二个元素</li>
        <li>第三个元素</li>
        <li>第四个元素</li>
        <li>第五个元素</li>
        <li>第六个元素</li>
        <li>第七个元素</li>
    </ul>
</body>

目标伪类选择器：

<style>
    :target{        /*选择器可用于选取当前活动的目标元素*/
        color:red;
        font-size:18px;
    }
</style>

5、CSS外观属性：

包括颜色、字体、半透明、对齐方式、行高字间距、

<style>
p{
    color:red;                             /*设置颜色的三种方式*/
    color:rgb(255,150,100,0.5);      /*第四个参数设置透明度*/
    color:#FFFFFFF;

    line-height:8px;             /*设置行高*/
    text-indent:2em;                /*所有段落首行缩进   1em就是一个字的宽度*/
}
h3{
    text-align:center;            /*设置对齐方式*/
    /*设置文字阴影text-shadow：水平位置 垂直位置  模糊距离 阴影颜色*/
    text-shadow:1px  2px 3px rgb(255.250,100,0.3);       
}
div{
    letter-spacing:2px;             /*字间距*/
     word-spacing:2px               /*单词间距 针对于英文*/
}
</style>

<body>
    <div> 这是一个例子  </div>
</body>

CSS的样式表：

内嵌样式表：如上面代码所示，代码和结构分离；

行内样式表：

外部样式表：创建一个外部css文件，然后调用：

<div> 外部样式表</div> /*div的样式已在css设置*/

CSS的复合选择器：

交集选择器：

<style>
    .red{
        color:red;
        }
    p.red{                          /* 选择的是类名为.red的段落标签*/
        font-size:30px;                   
        }
</style>

并集选择器：多个元素具有相同的属性时，进行集体声明

<style>
    div,
    p,
    span,
    .dingyi{
        color:red;
    }
</style>

后代选择器：用来选择元素或元素组的后代，把外层标签写在前面，内层标签写在后面，中间用空格分隔

<style>
    div p{         <!--选择div标签内的p元素，其中div可以自定义名称-->
        color:pink;
    }
</style>

子元素选择器：只能选择作为某元素子元素的元素，写法是父级元素写在前面，子集元素写在后面，如果中间用>连接，则只选择最近的子集元素。

选择器测试：

<head>
    <style>
    /*链接 登录的颜色为红色，同时主导航栏里面所有颜色的链接改为蓝色*/
    .site-r a {
        color:red;
    }
    .nav ul li a {
        color:blue;
    }
    /*主导航栏和侧导航栏里的文字都设置为14px且是微软雅黑*/
    .nav,.sitenav {
        font:14PX "microsoft yahei";
    }
    /*主导航栏里面的一级菜单链接文字颜色为绿色*/
    .nav>ul>li a {
        color:grenn;
    }

    </style>
</head>

<body>
    <!--主导航栏-->
    <div class="nav">
        <ul>
            <li><a herf="#">公司首页 </a></li>
            <li><a herf="#">公司简介 </a></li>
            <li><a herf="#">公司产品 </a></li>
            <li>
                <a herf="#">联系我们</a>
                <ul>
                    <li><a herf="#">公司邮箱 </a></li>
                    <li><a herf="#">公司电话 </a></li>
                </ul>
            </li>
        </ul>
    </div>
    <!--侧导航栏-->
    <div class="sitenav">
         <div class="site-l"> 左侧导航栏</div>
         <div class="site-r"><a herf="#">登录</a> </div>
    </div>
</body>

属性选择器：选取标签带有某些特殊属性的选择器

<style>
    a[title] {            /*属性选择器用中括号来表示*/
        color:red;
    }
    input[type=text] {       /*只把input中的text属性显示为蓝色*/
        color:blue;
    }
</style>

<body>
    <a herf="#" title="我是百度">百度</a>
    <a herf="#" title="我是新浪">新浪</a>
    <a herf="#" >搜狐</a>
    <a herf="#" >网易</a>
    <input type="text" value="文本框">
    <input type="text" value="文本框">
    <input type="submit" >
    <input type="reset">
</body>

另外：E[attr*=val] 表示选择属性值里包含val字符并且在“任意”位置的

E[attr^=val] 表示选择属性值里包含val字符并且在“开始”位置的

E[attr$=val] 表示选择属性值里包含val字符并且在“结束”位置的

CSS背景

background-color 背景颜色

background-image ：url（）背景图片地址

background-repeat 是否平铺，包括repeat-x，repeat-y和repeat

background-position 背景位置

background-attachment 背景固定还是滚动

CSS的特性：层叠性、继承性、优先级