html+css第三天

最新推荐文章于 2024-07-18 20:18:47 发布

殘楓輕舞

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量109

点赞数 1

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_61418655/article/details/125877511

版权

伪类: 伪造 class类

链接不同的状态:

a:link{ 未访问的链接 }
a:visited{ 已访问的链接 }
a:hover{ 鼠标经过 }
a:active{ 鼠标按下 }

当四个伪类一起使用的时候,使用顺序不能改变.如果四个一起使用基本是在a标签里使用.
也可以单独使用,如单独使用基本只会使用后两个.

<a>按钮</a>

    a:link{
       color: red;
    }
    a:visited{
       color: yellow; 
    }
    a:hover{
       color: pink;
    }
    a:active{
        color: palegreen;
    }

transition:2s; 时间延迟单位/秒(s)

<div></div>

    div{
        width: 200px;
        height: 100px;
        background-color: red;
        transition: 3s;
    }
    div:hover{
       width: 800px;
       background-color: pink;
       transition: 3s;
    }

通过伪类查找元素: 所有标签通用

1. p:first-child{ 查找第一个p标签 }
2. p:last-child{ 查找最后一个p标签}
3. p:nth-child(n){ 查找第n个p标签 }

<div class="a1">
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
  </div> 

  <div class="a2">
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
  </div> 

  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
  </ul>

      p:first-child{
          color: red;
      }
      p:last-child{
          color: palegreen;
      }
      .a1 p:nth-child(3){
          color: aqua;
      }
      ul li:first-child{
         color: red;
      }

:focus 可以设置输入框在聚焦时的样式

伪元素: 伪造的标签

::first-letter 选择元素第一个字母
::first-line 选择元素第一行
::before 在元素之前添加内容
::after 在元素之后添加内容
配合content:"内容"

英文字母和数字换行:

word-wrap:break-word;

<div class="a1">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

    .a1{
        width: 200px;
         height: 200px;
         background-color: red;
         word-wrap:break-word
    }
    div{ 
         width: 200px;
         height: 200px;
         background-color: pink;  
         word-wrap:break-word;

    }
    div:first-letter{
         color: red;
     }
    div::first-line{
         color: red;
    }
    div::before{
        content: "hahaha";
        color: blue;
        font-size: 20px;
    }

权重(优先级) 用在选择器

1. !important,加在样式属性值后，权重值为10000
2. 内联样式，如：style=""，权重值为1000
3. ID选择器，如：# content权重为100
4. 类，伪类，属性选择器如：content、：hover权值为10
5. 标签选择器和伪元素选择器，如：div、p、：before权值为1
6. 通用选择器(*)、子类选择器(>)、相邻选择器(+)、同胞选择器(~)权值为0

权重的计算:

行内样式 +1000
id +100
属性/class类/伪类 +10
标签选择器/伪元素 +1

案例:

body .it p { 12 }
div p span { 3 }
#aa .con span { 111 }

继承性:

css子类会继承最高元素的样式,子元素的子元素也一样

1、字体系列属性

font-family	字体系列
font-weight	字体的粗细
font-size	字体的大小
font-style	字体的风格

　　2、文本系列

text-indent	文本缩进
text-align	文本水平对齐
line-height	行高
word-spacing	单词之间的间距
letter-spacing	中文或者字母之间的间距
text-transform	控制文本大小写
color	文本颜色

　　3、元素可见性：

visibility

控制元素显示隐藏

　　4、列表布局属性：
　　list-style：列表风格

list-style-type	设置列表项标记的类型
list-style-position	设置在何处放置列表项标记
list-style-image	使用图像来替换列表项的标记
initial	将这个属性设置为默认值
inherit	规定应该从父元素继承 list-style 属性的值

　　5、光标属性：
　　cursor：光标显示为何种形态

url	需使用的自定义光标的 URL。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

table表格

th 标题
tr 行
td 列

自带的属性

width
height
border
cellspacing 行间距调整行与行之间的间距
cellpadding 列间距调整内容到边框的间距
align="center" 对齐方式

合并行:rowspan
合并列:colspan

vertical-align: 垂直居中 center top bottom

    <table border="1" cellspacing="0" cellpadding="0">
        <tr align="center" >
            <td colspan="2" >1</td>
            <td>3</td>
        </tr>
        <tr>
            <td rowspan="2">4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>

        table{
            width: 300px;
            height: 300px;
            border: 1px solid blue;
            text-align: center;
        }

form表单

method="" 提交方式
get 明文提交不安全传值
post 隐藏提交安全登录注册

action="" 提交地址

<input /> 输入框单标记
type 类型

text 文本类型
password 密码类型
radio 单选类型（起名 name）
checkbox 多选类型（起名 name）

textarea 文本域
rows 高
cols 宽
resize: none; 禁用文本域重置大小功能
select 下拉列表
option 下拉列表项
注:默认显示第一个

submit 提交按钮
reset 重置按钮
（只能在from中用）
button 按钮类型
<button>按钮</button>
（最好在from外，在from中容易受到影响）

单选多选默认选择:checked="checked"
单选多选不可点击:disabled="disabled"
下拉列表默认选择:selected="selected"

    <form method="post" action="">
        用户名:<input type="text" /><br>
        密码: <input type="password"><br>
        单选:<input type="radio" name="a"> 
             <input type="radio" name="a" checked="checked"> 
             <input type="radio" name="a"> <br>
        多选:<input type="checkbox" name="b">     
             <input type="checkbox" name="b" disabled="disabled"> 
             <input type="checkbox" name="b"><br>
        文本域: <textarea></textarea>  <br>
        下拉列表: <select>
                     <option>请选择</option>
                     <option>牡丹江</option>
                     <option>哈尔滨</option>
                     <option selected="selected">大庆</option>
                 </select><br>
             
        <input type="submit" value="提交">
        <input type="reset" value="OK">
    </form>

    <input type="button" value="按钮">
    <button>按钮</button>

        textarea{
            width: 200px;
            height: 100px;
            resize: none;
        }