html+css

博主： collins
发布时间：2023 年 08 月 21 日
214 次浏览
1 条评论
2506字数
分类：前端开发

我现在才发现IJ不止是能开发后端，开发前端也是可以的。
以下就是一些html入门级比较中后期的教程了。

| :----: | ---- |
|type|指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text|
|name|指定表单元素的名称|
|value|元素的初始值。type为radio时，必须指定一个值|
|size|指定表单元素的初始宽度，当type为text或password时，表单元素的大小以字符为单位。|
|-|隐藏域 hidden 只读readonly 禁用 disabled|
|-|内容提示 placeholder 非空 required 正则表达域 pattern|

| ---- | ---- | ---- |
|语法|说明|其它元素|
|display: block;|css默认属性||
|border-radius: 10px;|边框边距||
|text-align: center;|边框字体位置||
|text-decoration: none;|清除下划线||
|margin-right: 5px;|边框与边框之间的距离||
|font-weight:|字体粗细|normal/bold/bolder/lighter;|
|font-family:|浏览器字体选择|"Arial Black"，楷体;|
|font|字体选择综合|顺序：family,size,style,variant,weight|
|text-indent: 0em;|字体缩进(类似于添加空格)||

<h2>css</h2>
应用场景：美化字体，颜色，边距，高度，宽度，背景图，网页定位，浮动。
<h4>css导入</h4>
    
    <style>
        h1{
            color: red;
        }
    </style>
    
    <link rel="stylesheet" href="css/style.css">
<h4>css选择器</h4>
作用：选择页面上的某一个或者某一类元素。
    
    <style>
     .qing{
     color: #3748ff;
    }
    </style>
    <h1 class="qing">标题1</h1>
    <p  class="qing">标签1</p>
    
    <style>
     #qing{
     color: #ff008a
    }
    </style>
    <h1 id="qing">标题1</h1>
<h5>高级选择器</h5>
    
    
    <style>
      body p{
      background: #3cbda6;
      }
    </style>
    
    <style>
      body>p{
      background: #3cbda6;
      }
    </style>
    
    <style>
      .active + p{
      background: #a13d30;
      }
    </style>
    <p>p1</p>
      <p class="active">p2</p>
    <p>p3</p>
    
     <style>
      .active ~ p{
      background: #a13d30;
      }
      </style>
<h5>结构伪类选择器</h5>
<img src="https://qqclwy.com/usr/uploads/2023/08/2628897684.png" width=350>
    /*ul的第一个子元素*/
    ul li:first-child{
      background: #02ff00;
    }
    /*ul的最后一子元素*/
    ul li:last-child{
      background: #ff4832;
    }
    /*选中p1：定位到父元素，选择当前的第一个元素*/
    p:nth-child(2) {
      background: #2700ff;
    }
    /*选中父元素，下的p元素的第二个，类型*/
    p:nth-of-type(2) {
      background: yellow;
     }
<h5>属性选择器</h5>
    a[href^=http / $=pdf]{
    	backgrounp: yellow;
    }
    =  绝对等于
    *= 包含这个元素
    ^= 以这个开头
    $= 以这个结尾

[1]: https://qqclwy.com/usr/uploads/2023/08/2628897684.png
  [2]: https://qqclwy.com/usr/uploads/2023/08/1609532197.png

最后修改：2023 年 10 月 08 日