zoukankan      html  css  js  c++  java
  • 5.28前端学习第二天——html/css

    1.<a href=""> <!--链接标签--> <!--核心属性就是href 属性值可以是一个跳转的地址-->
    <!--href里面的内容就是路径-->
    <!--适用于任何带有路径的东西-->
    <!--href里面的内容就是路径-->
    <!--
    绝对路径:从盘符开始,然后依次的往下查找
    本地:
    C:/Users/Administrator/Desktop/....l
    服务器的:
    www.baidu....
    127.0.0.1
    192.168....

    http://www.baidu.com
    相对路径: 从当前文件开始,如果下一级目录就直接写文件夹名,上一级用../表示

    盘符根路径: 直接可以跳转到当前文件所有的盘符根目录中 /
    服务器底下 省略
    本地底下
    -->
    2.<img src="/koala.jpg" alt="图片正在加载中" width="200" align="center" />
    <img src="/koala.jpg" alt="" width="200" align="center" />
    <!--图像标签
    src 图片的路径,
    alt 当图片显示不出来的时候才会显示
    图片正在下载的时候。。。加载中
    图片的路径错误的时候
    width
    height
    align img是我们接触的第一个行内块标签,靠左或者靠右
    3.<!--
    前端和后端之间的通信
    1.form提交方式
    2.ajax提交方式
    -->
    <!--核心标签:只有提交的功能,没有任何的样式-->
    <!--form
    属性:
    action 提交的地址,通常为服务端的地址,如果不写,默认往本页提交
    method 提交的方式。get/post 如果不写,为get提交
    get和post的区别。
    -->
    <form action="" method="">
    <!--
    input、button是一个行内块标签
    input是表单的核心标签,通过修改input标签中的type属性来改变展现的样式-->
    例子:
    用户名:<input type="text" name="username"/><br />
    密码名:<input type="password" name="userpwd"/><br />
    <!--提交-->
    <button>提交1</button>
    <input type="submit" />
    <!--<input type="image" src="koala.jpg" />-->
    <!-- ?后面的内容表示参数。我们最终的目的是要把必须的参数给发送到后端
    想要发送参数,input中必须含有name属性

    -->
    <!--一组必须含有相同的name属性值
    input中的值有一个属性,value属性
    checked 默认选中,当属性名等于属性值的时候,只需要写属性名即可
    -->
    4.CSS学习:
    html 结构,承载内容
    css 样式。
    层叠样式表
    JavaScript 行为


    css的使用方式()
    1.行内样式(内联样式)
    <标签 style="属性名1:属性值1;属性名2:属性值2;..."></标签>

    2.页面嵌入(内部样式表)
    在head标签里面增加一个子标签
    <style>
    选择器{
    属性名1:属性值1;
    属性名2:属性值2;
    ......
    }
    </style>


    3.外部文件(外部样式表)
    在head标签里面增加一个子标签
    <link rel="stylesheet" href="css文件的路径" />

    4.外部导入样式
    主要用在样式初始化。因为有一些标签有自己的样式,我们需要清空,方便自己计算


    css语法: (符号都是英文的)
    选择器{
    属性名1:属性值1;
    属性名2:属性值2;
    ......
    }
    -->
    5.颜色的表示方法:
    颜色色值的英文单词 red,yellow,green,blue...
    2.16进制表示法
    2 010101
    8
    10
    16 0123456789abcdef
    基础三原色 红绿蓝
    每个颜色是由两个16进制的数来表示的#ff 00 00
    简写
    #xxyyzz -> #xyz
    #ffff00 #ff0
    #aabbcc #abc
    #aabcdd 不能简写的
    #000000
    #ffffff 白色
    #cccccc 黑 白 灰
    3.rgb表示法
    16*16 = 256
    rgb(0-255,0-255,0-255)
    6.CSS选择器
    ID选择器
    使用id选择器:在元素上面增加一个id属性,id属性的属性值不用用数字开头
    一个页面中只能有一个id属性值
    css中id选择的表示方法用 # 表示
    class选择器
    使用class选择器:在元素上增加一个class属性,class属性的属性值不能用数字开头
    一个页面中可以有多个class属性值
    css中class选择器的表示方法用 . 表示
    标签选择器
    直接写标签名
    组合选择器
    选择器直接用,分隔开即可
    子代选择器
    > 只针对子代
    后代选择器
    用空格表示,包含着子代选择器
    通用选择器
    * 针对于所有的标签
    7.选择器是有权重的
    内联样式 1000
    id 100
    class 10
    元素 1
    通用 0
    boss !important 只要出现,就以这个为主


    权重越高,冲突部分的样式就以权重高的为主,并不是说这个选择器没有用了,而是里面冲突的样式
    权重仅仅只能作为参考

    权重的计算
    不需要管子代和后代的
    如果权重相同,就近原则。以后定义的为准
    :hover 叫伪类选择器
    当你的鼠标放上去的时候,会变化成的样子
    权值 10

    8.text-align: right; /*文本对其方式*/
    text-decoration: underline; /*文本下划线*/
    color: #f00; /*设置字体的颜色*/
    line-height: 166.67px; /*文本的行高*/
    /*一行文字所占的高度,让他上下居中*/

    /*font-family: "Microsoft YaHei";*/
    /*设置字体的样式:宋体,楷体... 去百度,翻译中英文 */
    font-family: "宋体"; /*自己去百度找到宋体对应的英文,节约空间*/
    font-style: italic; /*规定字体是否倾斜*/
    font-weight: bold;
    font-size: 16px ; /*设置字体的大小*/
    /*在浏览器中,默认的字体大小16px
    谷歌浏览器中,字体大小最小可以为12px
    火狐没有限制
    cursor: none; /*设置鼠标的样式*/
    display: block; /*元素分为三大类,设置元素的显示方式
    行内 inline
    块级 block
    行内块 inline-block
    none 无
    <!--有序列表和无序列表-->
    <!--实际开发中有序列表基本不用-->
    <!--这三个都是块级标签-->

    9.opacity: 0.1; /*取值的范围是0-1之间,可以为0和1*/
    /*表示整个元素*/
    background-color: rgba(255,0,0,0.1); /*最后一个参数a表示透明度,取值的范围是0-1之间,可以为0和1*/
    /*只表示背景颜色*/

     

  • 相关阅读:
    bestcoder #66
    uva11093 Just Finish it up
    UVA 12627 Erratic Expansion
    uva714 Copying Books
    龟兔赛跑
    神、上帝以及老天爷
    不容易系列之(3)―― LELE的RPG难题
    C. Watto and Mechanism
    Phone List hdu1671
    B. Han Solo and Lazer Gun
  • 原文地址:https://www.cnblogs.com/awei313558148/p/10938814.html
Copyright © 2011-2022 走看看