写点什么

前端基础二之 css 篇

用户头像
ベ布小禅
关注
发布于: 19 小时前


题外话

📢 博客主页:❤布小禅❤📢 作者专栏:❤Python❤❤Java❤

前言

身为一个合格的后端开发人员


前端的基础知识也是需要了解的

CSS

CSS(cascading style sheets)是层叠样式表,适用于增强控制网页样式并允许将样式和网页分离的一种标记语言


其实就是可以单独放在另一个文件里面的给 HTML 做修饰,美化的一种语言

1. 嵌入 HTML

三种方法


  1. 写在另一个 css 的文件中,通过 HTML 中的 link 标签指向该 css 文件

  2. html 文件:


   <!DOCTYPE html>   <html lang="en">   <head>       <meta charset="UTF-8">       <link rel="stylesheet" type="text/css" href="学习.css">       <title>Title</title>   </head>   <body>   <p>       将这个落魄的时代拉回正轨   </p>   </body>   </html>
复制代码


css 文件:


   p{       color: red;       font-size: 50px;   }
复制代码


作用是将 p 标签的字体颜色设置为红色,大小设置为 50px


然后页面展示的效果为:



  1. 将 css 语法写在 head 标签的 style 标签

  2. 我们使用学过的 span 标签将 p 标签的文本内容分开

  3. 然后为 span 标签写 css


   <!DOCTYPE html>   <html lang="en">   <head>       <meta charset="UTF-8">       <link rel="stylesheet" type="text/css" href="学习.css">       <title>Title</title>       <style>           span{               color: bisque;               font-size: 40px;           }       </style>   </head>   <body>   <p>       <span>将这个落魄的</span>时代拉回正轨   </p>   </body>   </html>
复制代码


css 文件不变


效果:



  1. 将 css 写在标签里

  2. 通过标签内的全局属性style属性设置 css


   <!DOCTYPE html>   <html lang="en">   <head>       <meta charset="UTF-8">       <link rel="stylesheet" type="text/css" href="学习.css">       <title>Title</title>       <style>           span{               color: bisque;               font-size: 40px;           }       </style>   </head>   <body>   <p>       <span>将这个落魄的</span>时代拉回正轨   </p>   <p style="font-size: 55px; color: aqua">       难道,你也要多管闲事吗!   </p>   </body>   </html>
复制代码


css 文件内容不变


效果:



一般最好使用 css 语法来定义样式,而不使用 HTML 自带的加粗,斜体等标签


并且通常将 css 代码写在单独的 css 文件,这样就可以通过修改 css 文件来修改整个网页

2. CSS 基础语法

你可以通过 css 对 HTML 格式进行美化,添加样式,比如颜色,大小等


CSS 语法由两部分组成,选择器和声明


声明由大括号围起来


p{    color: red;    font-size: 50px;}
复制代码


里面的 p 是选择器,大括号里面的是声明


当然,选择器不仅可以是标签,还可以是 id,属性,类。。。


声明可以是一条,也可以是多条,多条声明使用英文半角分号;隔开

3. CSS 高级语法

3.1 组选择器

选择器可以写多个


比如这样:


p,h1,h2,ul{    color: red;}
复制代码


这样可以对多个标签进行添加样式


html 代码:


<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <link rel="stylesheet" type="text/css" href="学习.css">    <title>Title</title></head><body><p>    <span>将这个落魄的</span>时代拉回正轨</p><p>    难道,你也要多管闲事吗!</p></body></html>
复制代码


css 代码:


span,p{    color: red;    font-size: 50px;}
复制代码


效果:


3.2 继承

选择器的 css 样式会继承给该标签的子标签


body{    color: red;    font-size: 20px;}
复制代码


就像这个 css 代码,给 body 的颜色设置为红色,字体大小为 20px


那么 body 里面的标签也都会是这个样式


html 代码


<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <link rel="stylesheet" type="text/css" href="学习.css">    <title>Title</title></head><body><p>    <span>将这个落魄的</span>时代拉回正轨</p><p>    难道,你也要多管闲事吗!</p>哈哈哈</body></html>
复制代码


css 代码:


body{    color: bisque;    font-size: 50px;}
复制代码


效果:



而如果不希望继承的话,可以对其中的某个标签,单独在写一个选择器


而有的版本过低的浏览器并不支持继承,那如果想对一些标签给同样的样式时,就只能使用组选择器了

4. 选择器

4.1 派生选择器

就是根据父标签找到父标签下的某个字标签,为其设置样式


格式为:父标签 字标签{声明}


看代码实例:


HTML:


<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <link rel="stylesheet" type="text/css" href="学习.css">    <title>Title</title></head><body><p>    <span>将这个落魄的</span>时代拉回正轨</p><p>    难道,你也要多管闲事吗!</p>哈哈哈</body></html>
复制代码


我们可以使用派生选择器将 p 标签的 span 标签单独设置为另一个样式,然后再为 p 标签设置样式


css:


p span{    color: bisque;    font-size: 50px;}p{    color: blue;    font-size: 40px;}body{    color: aqua;    font-size: 40px; }
复制代码


效果:


4.2 id 选择器

我们可以为标签设置 id 属性,然后通过 id 给标签设置样式


格式:#id{声明}


看代码:


HTML:


<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <link rel="stylesheet" type="text/css" href="学习.css">    <title>Title</title></head><body><dl id="username">    <li>布小禅</li>    <li id="miao">笨喵</li></dl></body></html>
复制代码


css:


#username{    color: blueviolet;}#miao{    color: saddlebrown;}
复制代码


效果:


4.3 类选择器

通过给标签设置 class 属性


让选择器识别 class 属性名,来给具有该 class 名的标签设置样式


格式.class名{声明}


html 代码:


<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <link rel="stylesheet" type="text/css" href="学习.css">        <Title>前端基础学习day02</Title>    </head>    <body>        <from>            <label>                账号:<input class="name" type="text">                <br>                密码:<input class="pass" type="password">            </label>        </from>    </body></html>
复制代码


css 代码:


body{    color: aqua;    font-size: 40px;}.name{    color: brown;}.pass{    color: cornflowerblue;}
复制代码


页面效果:


4.4 属性选择器

估计有没有该属性判断是否为标签设置样式


格式[属性(=value)]{声明}


为含有 name 属性的标签设置字体颜色


HTML:


<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <link rel="stylesheet" type="text/css" href="学习.css">    <title>Title</title></head><body><p name="te0">从前有座山</p><h1 name="te1">是字而已</h1></body></html>
复制代码


css:


[name]{    color: cornflowerblue;}
复制代码


效果:



为 name 属性的值为 te0 的标签设置样式


html:


<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <link rel="stylesheet" type="text/css" href="学习.css">    <title>Title</title></head><body><p name="te0">从前有座山</p><h1 name="te1">是字而已</h1></body></html>
复制代码


css:


[name="te0"]{    color: cornflowerblue;}
复制代码


效果:


5. css 常见样式

5.1 背景

设置某标签的背景颜色和图片


  1. 设置背景颜色


   标签名{       background-color: red;   }
复制代码


  1. 设置背景图片


   标签名{       background-image: url('图片路径')   }
复制代码


代码演示:


为主页面设置背景,为 p 标签设置背景颜色


html:


<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <link rel="stylesheet" type="text/css" href="学习.css">    <title>Title</title></head><body><p name="te0">从前有座山</p><p name="te1">是字而已</p></body></html>
复制代码


css:


p{    background-color: cornflowerblue;}body{    background-image: url('壁纸.jpg');}
复制代码


页面效果:



可以看到,这是相当的不美观啊,因为 body 是页面大小,如果图片尺寸不够大的话,就会将图片往左,往下铺。


所以还有几个属性需要设置


  1. 为 p 标签设置宽度,高度

  2. css 代码:


   p{       background-color: cornflowerblue;       height: 30px;       width: 100px;   }
复制代码


  1. 为 body 标签设置,不让图片平铺,并设置图片的大小

  2. css 代码:


   body{       background-image: url('壁纸.jpg');       background-repeat: no-repeat;       background-size: 1900px 950px;   }
复制代码


修改完的效果:


5.2 文本

通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。


  1. 通过 text-indent 属性可以设置文本首行缩进多少像素

  2. 为段落设置首行缩进

  3. 代码:


   <!DOCTYPE html>   <html lang="en">   <head>       <meta charset="UTF-8">       <link rel="stylesheet" type="text/css" href="学习.css">       <title>Title</title>   </head>   <body>   <div>       <p>炎炎夏日,位于联邦东部的池云雨林,云雾弥漫,好似一层薄纱环绕,一棵棵参天古树,纵横交错,繁茂的树冠中,时而有几只飞鸟腾空而起,嘶鸣着翱翔于天际间。炎炎夏日,位于联邦东部的池云雨林,云雾弥漫,好似一层薄纱环绕,一棵棵参天古树,纵横交错,繁茂的树冠中,时而有几只飞鸟腾空而起,嘶鸣着翱翔于天际间。炎炎夏日,位于联邦东部的池云雨林,云雾弥漫,好似一层薄纱环绕,一棵棵参天古树,纵横交错,繁茂的树冠中,时而有几只飞鸟腾空而起,嘶鸣着翱翔于天际间。炎炎夏日,位于联邦东部的池云雨林,云雾弥漫,好似一层薄纱环绕,一棵棵参天古树,纵横交错,繁茂的树冠中,时而有几只飞鸟腾空而起,嘶鸣着翱翔于天际间。</p>   </div>   </body>   </html>
复制代码


css:


   p{       text-indent: 15px;       text-align: right;   }   div{       background-color: sandybrown;       background-position: center;       width: 900px;       height: 500px;   }
复制代码


效果:



  1. 文本颜色是有 color 属性定义的

  2. 之前经常使用,就不多做赘述了

5.3 字体

你已经是一个合格的程序员了,要学会自己敲代码测试效果了!!!!!!!!!


可以同 css 设置字体的颜色,大小,加粗等


  1. 颜色,color 属性

  2. 大小 font-size 属性

  3. text-decoration 属性设下划线(underline),删除线(line-through),上划线(overline)

  4. 字体样式(宋体等)font-family

  5. 斜体是将 font-style 设置为 italic

  6. font-weight 设置为 bold

5.4 链接

你已经是一个合格的程序员了,要学会自己敲代码测试效果了!!!!!!!!!


a:link {color:red;}    /* 未被访问的链接 */a:visited {color:blue;}  /* 已被访问的链接 */a:hover {color:yellow;}  /* 鼠标指针移动到链接上 */a:active {color:black;}  /* 正在被点击的链接 */
复制代码

5.5 列表

列表的属性并不多


  1. 列表类型:list-style-type: square;

  2. 列表图像:list-style-image: url(图片地址);

  3. 列表标志位置:list-style-position

5.6 表格

  1. 设置表格边框table{border: 1px solid yrllow;}设置 1 像素大小的表格边框

  2. 设置表格宽度高度width属性和height属性

  3. 将表格边框和内部的表头边框合一border-collapse:collapse

  4. 设置表格对齐方式text-align:center

  5. 设置表格内边距padding:15px

结语

兴趣是最好的老师,坚持是不变的真理。学习不要急躁,一步一个脚印,踏踏实实的往前走。每天进步一点点,日积月累之下,你就会发现自己已经变得很厉害了。


我是布小禅,一枚自学萌新,跟着我每天进步一点点吧!



发布于: 19 小时前阅读数: 3
用户头像

ベ布小禅

关注

还未添加个人签名 2021.04.06 加入

平平无奇一萌新,默默无闻学IT,我是布小禅,一个网络专业却对编程及其感兴趣的小白! 目前在学python和Java,都很浅显,平时爱写点学习笔记。IT技术交流群:1039347613 也可以联系本人企鹅:2228660752 v:Smly0413

评论

发布
暂无评论
前端基础二之css篇