前端入门03——CSS

2021-03-07 18:27

阅读：669

标签：rowspan tomato racket amp 展示支持 ppp input框 tip

昨日内容回顾

表格标签

table>
  thead>
    tr>  一个tr就是一行
        th>th>  表头里面建议使用th加粗文本
    tr>
  thead>  表头
  tbody>
    tr>
        td>td>  表单里面的建议直接用td即可
    tr>
  tbody>  表单
table>

?
补充:
    table有一个border属性可以加一个比较丑的边框
    针对tr可以设置rowspan、colspan

form表单

# 能够获取用户数据并且发送到后端
form action=‘‘ method=‘‘ enctype=‘‘>form>
?
"""
action  控制数据的提交路径
    1.不写默认朝当前页面所在的地址提交
    2.写全路径
    3.只写后缀 /index/   能够自动补全当前页面所载的后端服务器ip:port(暂时不考虑)
?
method  控制请求方式
    默认是get请求
        也可以携带数据 但是数据是直接破解在url后面的 不安全并且大小有限制
        url?username=jason&password=123
    可以修改为post请求
        携带的数据放在请求体里面的
?
enctype  控制数据的编码方式
    默认是urlencoded 只能发送普通的文本 不能发送文件
    如果你要发送文件 必须改为 formdata
        发送文件必须要修改的两个参数
            method = ‘post‘
            enctype=‘...formdata‘
"""
input标签 获取用户数据的(输入 选择 上传...)
input type=‘‘>input>
    type可以书写的类型
    text  普通文本
    password  展示密文
    date  日期
    radio  单选
        默认选择可以用checked(属性名和属性值一样的时候就可以简写)
    checkbox  多选
        默认选择可以用checked
    file  获取文件
        了解:可以加multiple 支持传多个文件
    submit  触发form表单提交动作
    button  什么功能都没有 就是一个普通的按钮
    reset   重置按钮
?
select标签  下拉框 默认是单选 可以加multiple成多选
    一个个下拉框选项是一个个的option标签
  option标签默认选中可以加selected
  select>
    option value=‘‘>111option>
    option value=‘‘>222option>
    option value=‘‘ selected>333option> 
  select>
    
textarea标签  获取大段文本内容
?
label标签  给input加上对于的注释信息  不写其实也没有关系
    input写在lable里面
  label的for关联input的id值 可以不嵌套
    
"""
获取用户数据的标签都应该都name属性
    因为你需要给后端发送数据并且需要标明数据到底表示什么
    name   字典的key
    value  字典的value(用户数据)
?
需要用户选择的标签 你需要自己加上value值
    radio
    checkbox
    option
    ps:如果你给获取用户输入的标签加了value值 那么就类似于默认值
"""
?
ps:hidden、disable、readonly、placeholder
  
# 触发form表单提交数据的两种方式
    type=submit
  button按钮

flask框架

代码目前你不需要去研究 我们写这个只是为了验证form表单的功能而已

css

# 注释
/**/  由于前端代码都笔记多并且没有什么规律 所以我们都会利用注释来帮助我们维护代码
?
# 语法结构
选择器 {
  属性1:值;
    属性2:值;
  属性3:值;
}
?
# 选择器
1.基本选择器
    id选择器
    #d1 {}
  类选择器
    .c1 {}
  标签选择器
    div {}
  通用选择器
    * {}
    p#d1.c1  p id="d1" class="c1">p>  emmet插件
?
2.组合选择器
    我们将前端标签的嵌套定义为父亲 儿子 后代 兄弟等等关系
    后代选择器
    div p {}  只要是div内部的p都拿到
  儿子选择器
    div>p {}    只拿内部第一层级的p
  毗邻选择器
    div+p   {}  紧挨着我的同级下一个
  弟弟选择器
    div~p   {}  同级别下面所有的p
?
3.属性选择器  []
    [username]
  [username=‘jason‘]
  input[username=‘jason‘]
ps:标签既可以有默认的书写 id class...
  还可以有自定义的书写并且支持多个
  p id=‘d1‘ username=‘jason‘>p>

今日内容

css层贴样式表(选择器)
分组与嵌套
伪类选择器
伪元素选择器
选择器优先级
css属性相关(操作标签样式)

CSS

层贴样式表:就是给HTML标签添加样式的，让它变的更加的好看

# 注释
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/

通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...


# css的语法结构
选择器 {
  属性1:值1;
  属性2:值2;
  属性3:值3;
  属性4:值4;
}

# css的三种引入方式
	1.style标签内部直接书写(为了教学演示方便我们用第一种)
  	
  2.link标签引入外部css文件(最正规的方式 解耦合)
      
	3.行内式(一般不用)
  		老板好 要上课吗?

"""
css的学习流程

	1.先学如何查找标签
		css查找标签的方式你一定要学会
		因为后面所有的框架封装的查找语句都是基于css来的
		css选择器很简单很好学不要有压力!!!
	
	2.之后再学如何添加样式
"""

CSS选择器

基本选择器

# id选择器

# 类选择器

# 元素/标签选择器

# 通用选择器

组合选择器

"""
在前端 我们将标签的嵌套用亲戚关系来表述层级
    div
        div p
        div p
            div p span
        
        span
        span
  
  div里面的p span都是div的后代
  p是div的儿子
  p里面的span是p的儿子 是div的孙子
  div是p的父亲
  ...
"""

# 后代选择器
# 儿子选择器
# 毗邻选择器
# 弟弟选择器

                /*后代选择器*/
        /*div span {*/
        /*    color: red;*/
        /*}*/

        /*儿子选择器*/
        /*div>span {*/
        /*    color: red;*/
        /*}*/

        /*毗邻选择器*/
        /*div+span {  !*同级别紧挨着的下面的第一个*!*/
        /*    color: aqua;*/
        /*}*/

        /*弟弟选择器*/
        div~span {  /*同级别下面所有的span*/
            color: red;
        }

属性选择器

"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的

/*[username] {  !*将所有含有属性名是username的标签背景色改为红色*!*/
        /*    background-color: red;*/
        /*}*/

        /*[username=‘jason‘] {  !*找到所有属性名是username并且属性值是jason的标签*!*/
        /*    background-color: orange;*/
        /*}*/

        /*input[username=‘jason‘] {  !*找到所有属性名是username并且属性值是jason的input标签*!*/
        /*    background-color: wheat;*/
        /*}*/

分组与嵌套

div,p,span {  /*逗号表示并列关系*/
            color: yellow;
        }
#d1,.c1,span  {
            color: orange;
        }

伪类选择器

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    meta name="viewport" content="width=device-width, initial-scale=1">
    style>
        body {
            background-color: black;
        }
        a:link {  /*访问之前的状态*/
            color: red;
        }
        a:hover {  /*需要记住*/
            color: aqua;  /*鼠标悬浮态*/
        }
        a:active {
            color: black;  /*鼠标点击不松开的状态  激活态*/
        }
        a:visited {
            color: darkgray;  /*访问之后的状态*/
        }
        p {
            color: darkgray;
            font-size: 48px;
        }
        p:hover {
            color: white;
        }
        
        input:focus {  /*input框获取焦点(鼠标点了input框)*/
            background-color: red;
        }
    style>
head>
body>
a href="https://www.jd.com/">小轩在不在?a>
p>点我有你好看哦p>
input type="text">
body>
html>

伪元素选择器

p:first-letter {
            font-size: 48px;
            color: orange;
        }
p:before {  /*在文本开头 同css添加内容*/
            content: ‘你说的对‘;
            color: blue;
        }
p:after {
            content: ‘雨露均沾‘;
            color: orange;
        }
ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面马上讲)

选择器优先级

"""
id选择器
类选择器
标签选择器
行内式
	
"""

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    meta name="viewport" content="width=device-width, initial-scale=1">

    style>
        /*
            1.选择器相同 书写顺序不同
                就近原则:谁离标签更近就听谁的
            2.选择器不同 ...
                行内 > id选择器  > 类选择器 > 标签选择器
                精确度越高越有效
        */
        #d1 {
            color: aqua;
        }
        /*.c1 {*/
        /*    color: orange;*/
        /*}*/
        /*p {*/
        /*    color: red;*/
        /*}*/
    style>

head>
body>
    p id="d1" class="c1" style="color: blue">贤妻果然很识趣，有前途~p>
body>
html>

css属性相关

style>
        p {
            background-color: red;
            height: 200px;
            width: 400px;
        }
        span {
            background-color: green;
            height: 200px;
            width: 400px;
            /*行内标签无法设置长宽 就算你写了 也不会生效*/
        }
style>

字体属性

p {
            /*font-family: "Arial Black","微软雅黑","...";  !*第一个不生效就用后面的 写多个备用*!*/

            /*font-size: 24px;  !*字体大小*!*/

            /*font-weight: inherit;  !*bolder lighter 100~900 inherit继承父元素的粗细值*!*/

            /*color: red;  !*直接写颜色英文*!*/
            /*color: #ee762e;  !*颜色编号*!*/
            /*color: rgb(128,23,45);  !*三基色 数字  范围0-255*!*/
            /*color: rgba(23, 128, 91, 0.9);  !*第四个参数是颜色的透明度 范围是0-1*!*/

            /*当你想要一些颜色的时候 可以利用现成的工具
                1 pycharm提供的取色器
                2 qq或者微信截图功能
                              也可以多软件结合使用 
            */
        }

文字属性

p {
            /*text-align: center;  !*居中*!*/
            /*text-align: right;*/
            /*text-align: left;*/
            /*text-align: justify;  !*两端对齐*!*/

            /*text-decoration: underline;*/
            /*text-decoration: overline;*/
            /*text-decoration: line-through;*/
            /*text-decoration: none;*/
            /*在html中 有很多标签渲染出来的样式效果是一样的*/
            font-size: 16px;
            text-indent: 32px;   /*缩进32px*/
        }
        a {
            text-decoration: none;  /*主要用于给a标签去掉自带的下划线  需要掌握*/
        }

背景图片

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    meta name="viewport" content="width=device-width, initial-scale=1">
    style>
        #d1 {
            height: 500px;
            background-color: red;
        }
        #d2 {
            height: 500px;
            background-color: green;
        }
        #d3 {
            height: 500px;
            background-image: url("222.png");
            background-attachment: fixed;
        }
        #d4 {
            height: 500px;
            background-color: aqua;
        }
    style>
head>
body>
div id="d1">div>
div id="d2">div>
div id="d3">div>
div id="d4">div>
body>
html>

边框

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    meta name="viewport" content="width=device-width, initial-scale=1">
    style>

        p {
            background-color: red;

            border-width: 5px;
            border-style: solid;
            border-color: green;

        }
        div {
            /*border-left-width: 5px;*/
            /*border-left-color: red;*/
            /*border-left-style: dotted;*/

            /*border-right-width: 10px;*/
            /*border-right-color: greenyellow;*/
            /*border-right-style: solid;*/

            /*border-top-width: 15px;*/
            /*border-top-color: deeppink;*/
            /*border-top-style: dashed;*/

            /*border-bottom-width: 10px;*/
            /*border-bottom-color: tomato;*/
            /*border-bottom-style: solid;*/
            border: 3px solid red;  /*三者位置可以随意写*/

        }
        #d1 {
            background-color: greenyellow;
            height: 400px;
            width: 400px;
            border-radius: 50%;  /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/
        }
    style>
head>
body>
    p>穷人  被diss到了  哭泣.pngp>
div>妈拉个巴子,妈拉个巴子,妈拉个巴子,妈拉个巴子div>
div id="d1">div>
body>
html>

display属性

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    meta name="viewport" content="width=device-width, initial-scale=1">
    style>
        /*#d1 {*/
        /*    !*display: none;  !*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*!*!*/
        /*    display: inline;  !*将标签设置为行内标签的特点*!*/
        /*}*/
        /*#d2 {*/
        /*    display: inline;*/
        /*}*/
        /*#d1 {*/
        /*    display: block;  !*将标签设置成块儿级标签的特点*!*/
        /*}*/
        /*#d2 {*/
        /*    display: block;*/
        /*}*/
        /*#d1 {*/
        /*    display: inline-block;*/
        /*}*/
        /*#d2 {*/
        /*    display: inline-block;  !*标签即可以在一行显示又可以设置长宽*!*/
        /*}*/
    style>
head>
body>
div style="display: none">div1div>
div>div2div>
div style="visibility: hidden">单纯的隐藏 位置还在div>  
div>div4div>







body>
html>

盒子模型

"""
盒子模型
	就以快递盒为例
		快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
		盒子的厚度(标签的边框 border)
		盒子里面的物体到盒子的距离(内容到边框的距离  padding内边距)
		物体的大小(内容 content)
	
	
	如果你想要调整标签与标签之间的距离 你就可以调整margin
	
	浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除
	
"""

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    meta name="viewport" content="width=device-width, initial-scale=1">
    style>
        body {
            margin: 0;  /*上下左右全是0
            /*margin: 10px 20px;  !* 第一个上下 第二个左右*!*/
            /*margin: 10px 20px 30px;  !*第一个上  第二个左右  第三个下*!*/
            /*margin: 10px 20px 30px 40px;  !*上 右 下 左*!*/
        }
        /*p {*/
        /*    margin-left: 0;*/
        /*    margin-top: 0;*/
        /*    margin-right: 0;*/
        /*    margin-bottom: 0;*/
        /*}*/

        #d1 {
            margin-bottom: 50px;
        }


        #d2 {
            margin-top: 20px;  /*不叠加 只取大的*/
        }

        #dd {
            margin: 0 auto;  /*只能做到标签的水平居中*/
        }
        p {
            border: 3px solid red;
            /*padding-left: 10px;*/
            /*padding-top: 20px;*/
            /*padding-right: 20px;*/
            /*padding-bottom: 50px;*/

            /*padding: 10px;*/
            /*padding: 10px 20px;*/
            /*padding: 10px 20px 30px;*/
            /*padding: 10px 20px 30px 40px;*/  /*规律和margin一模一样*/
        }
    style>
head>
body>






p>pppp>

body>
html>

浮动

"""浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大"""
只要是设计到页面的布局一般都是用浮动来提前规划好

style>
        body {
            margin: 0;
        }
        #d1 {
            height: 200px;
            width: 200px;
            background-color: red;
            float: left;  /*浮动  浮到空中往左飘*/
        }
        #d2 {
            height: 200px;
            width: 200px;
            background-color: greenyellow;
            float: right;   /*浮动 浮到空中往右飘*/
        }
style>

前端入门03——CSS

标签：rowspan tomato racket amp 展示支持 ppp input框 tip

原文地址：https://www.cnblogs.com/lucky-cat233/p/12877236.html

上一篇：原生JS添加DOM

下一篇：底层XMLHTTPREQUEST的一些知识链接

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：前端入门03——CSS
文章链接：http://soscw.com/index.php/essay/61445.html

亲，登录后才可以留言！

前端入门03——CSS

昨日内容回顾

今日内容

CSS

老板好要上课吗?

CSS选择器

基本选择器

组合选择器

属性选择器

分组与嵌套

伪类选择器

伪元素选择器

选择器优先级

css属性相关

字体属性

文字属性

背景图片

边框

display属性

盒子模型

浮动

评论

热门文章

推荐文章

最新文章

置顶文章

前端入门03——CSS

昨日内容回顾

今日内容

CSS

老板好 要上课吗?

CSS选择器

基本选择器

组合选择器

属性选择器

分组与嵌套

伪类选择器

伪元素选择器

选择器优先级

css属性相关

字体属性

文字属性

背景图片

边框

display属性

盒子模型

浮动

评论

热门文章

推荐文章

最新文章

置顶文章

老板好要上课吗?