CSS入门

最新推荐文章于 2024-04-19 12:54:59 发布
置顶 最新推荐文章于 2024-04-19 12:54:59 发布
阅读量379 收藏 1
点赞数
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42829814/article/details/104229755
版权

HTML部分内容补充

1、form表单补充

<h1>多选框</h1>
            <form action=""method="get">
                <h2>choose your favourite fruit！</h2>
                1、apple <input type="checkbox" name="fruit" value="apple">
                2、orange <input type="checkbox" name="fruit" value="orange">
                3、banana <input type="checkbox" name="fruit" value="banana">
            <input type="submit">
            </form>
            <form action=""method="get">
                <h2>choose your SEX!!!</h2>
                    male: <input type="radio" name="sex" value="male" checked="checked">
                    female: <input type="radio" name="sex" value="female">
                <h2><input type="submit"></h2>
            </form>
            <!-- checked="checked"默认选中 -->
             <h1>Province</h1>
             <form action=""method="get">
                <select name="Province">
                    <option>beijing</option>
                    <option>shanghai</option>
                    <option>guangzhou</option>
                </select>
                <input type="submit">
             </form>
              <!-- form表单中想要提交数据 必须检查数据名 和数据值的格式是否正确 -->

单选框 多选框 复选框demo
2、专业素养知识
主流浏览器及其内核
IE Firefox GoogleChrome Safari Opera 分别对应以下内核
trident Gecko webkit/blink webkit presto

CSS

cascading style sheet 层叠样式表

1、引入css
1、行间样式 在标签中加上style属性 在style属性中写css样式代码
2、页面级css 在html文件的头部代码中写上style标签 然后写css代码作用于标签
3、外部文件css 在html文件中的head标签中写上link标签 href中放css文件的路径

2、样式选择器选择器

  1. id选择器 一对一的
  2. class选择器 多对多的
  3. 标签选择器 选中页面中所有的这个标签
  4. 通配符选择器 选中页面中所有的标签
  5. 属性选择器 选中有这个属性的所有标签的
  6. 父子选择器 / 派生选择器 选择一个父元素里边的子元素 父子选择器用什么选择器写都可以 只要父子关系成立就行
  7. 直接子元素选择器 选中父级元素下面的直接一级的子元素
  8. 并列选择器 用多个限制条件选中一个元素 并且不加空格 就是并列选择器
  9. 分组选择器 同时选中多个标签 以逗号隔开 同时作用多个标签

3、权重

/* ！important>行间样式>id选择器>class选择器=属性选择器>标签选择器>通配符选择器 */
/* 权重 权重之间的进制是256制的
    ！important      Infinity
    行间样式          1000
    id               100
    class|属性|伪类   10
    标签|伪元素       1
    通配符            0
    */

4、css常用属性

 /* 调整字体大小属性 设置的是字体的高度*/
    font-size: 30px;
    /* 设置字体加粗属性 */
    font-weight: bold;
    /* 设置字体斜体 */
    font-style:italic;
    /* 设置字体包 */
    font-family: Arial, Helvetica, sans-serif;
    /* 设置字体颜色 */
    color:red;
    /* 给容器加上外边框 */
    border:1px solid black;
    /* 设置容器的高度 */
    height: 30px;
    /* 设置字体颜色 */
    color:blue;
    border:1px solid red;
    /* 设置字体的对齐方式 */
    text-align: center;  
    /* 设置高度 */
    height: 30px;
    /* 设置文本的垂直居中 */
     line-height: 30px;
    /* 首行缩进 1em=1 font-size;=30px*/
    text-indent: 2em;
    /* 设置文本的上划线 中划线 喝下划线 和去掉下划线和中划线 */
    text-decoration: none;
    /* 设置鼠标为其他的提示符 */
    cursor: pointer;

5、伪类选择器
作用：当鼠标移到这个元素上面的时候元素发生变化
语法：任意标签后面加上：hover{}大括号里写鼠标移上去之后样式变化的代码

6、专业素养与常识

  1. 1、body 天生自带8px的margin
  2. 行级元素 feature：内容决定元素所占位置 不可以通过css改变宽高 span strong em a del
  3. 块级元素 feature：独占一行 可以通过css改变宽高 div p ul li ol form address
  4. 行级块元素 feature：行级块元素内容决定大小 可以通过css改变宽高 img
  5. 可以通过display改变元素的元素的特点

7、图片之间有4px的间距bug
由于图片是行级块元素所以也有inline属性 也就是常说的文字属性 他的特点之一就是分割的作用
用margin-left暴力解决这个bug可能会导致 代码压缩打包了之后上线图片效果和开发时不一样
建议直接把图片标签之间的回车和空格都去掉。

8、自定义标签
很多标签刚出生的时候样式不是我们想要的样子，其实我们可以通过css来定义成我们想要的样子，
例如ul一出生的大圆点可以用list-style：none；去掉，a标签的下划线可以用text-decoration：none
去掉、颜色也可以用color:#424242改成正常的黑色，等等。

9、盒模型

  1. border 边框
  2. padding 内边距
  3. margin 外边距
  4. width+height 内容
    盒模型概念图
    远视图demo
    远视图demo
    html
<div class="wrapper">
        <div class="box1">
            <div class="box2">
                <div class="box3">
                    <div class="box4">
                        <div class="box5">
                            <div class="box6">
                                <div class="box7">
                                    <div class="box8">
                                        <div class="box9">
                                            <div class="box10">
                                                <div class="content"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

css

.content{
    width:10px;
    height: 10px;
    background-color:#fff;
}
.box9{
    width:10px;
    height: 10px;
    background-color:#0f0;
    padding:10px;
}
.box8{
    width:30px;
    height: 30px;
    padding:10px;
    background-color:#fff;
}
.box7{
    width:50px;
    height: 50px;
    padding:10px;
    background-color: #0f0;
}
.box6{
    width:70px;
    height:70px;
    padding:10px;
    background-color: #fff;
}
.box5{
    width: 90px;
    height: 90px;
    padding:10px;
    background-color:#0f0;
}
.box4{
    width:110px;
    height: 110px;
    background-color:#fff;
    padding:10px;
}
.box3{
    width:130px;
    height: 130px;
    background-color:#0f0;
    padding:10px;
}
.box2{
    width:150px;
    height: 150px;
    background-color:#fff;
    padding:10px;
}
.box1{
    width: 170px;
    height: 170px;
    background-color:#0f0;
    padding:10px;
}

10、定位（层模型）

  1. absolute 绝对定位 脱离原来的位置进行定位 相对于最近的有定位的父级进行定位 如果没有那么相对于文档进行定位
  2. relative 相对定位 保留原来位置进行定位 相对于自己原来的位置进行定位
  3. 一般情况下 用relative用来做参照物 用absolute用来进行定位
  4. fixed 固定定位 无论页面怎么动 它都不动
  5. z-index大的元素会显示在最上面
    层模型demo
    层模型demo
    html
<div class="nav">
        <div class="xd"></div>
        <div class="jd"></div>
    </div>

css

.xd{
    width:100px;
    height: 100px;
    position: absolute;
    background-color:red;
    opacity: 0.5;
}
.jd{
    width:150px;
    height: 150px;
    background-color:green;
}

绝对定位和相对定位demo
绝对定位和相对定位demo
html

<div class="wrapper1">
       <div class="content1">
           <div class="boxx"></div>
       </div>
    </div>

css

.wrapper1{
    position: relative;
    width: 200px;
    height: 200px;
    background-color:orange;
}
.content1{
    width:100px;
    height:100px;
    background-color:black;
}
.boxx{
    position: absolute;
    left:50px;
    width:50px;
    height: 50px;
    background-color:yellow;
}

相对定位 绝对定位 固定广告定位的应用 五环demo
相对定位 绝对定位 固定广告定位的应用 五环demo
html

<div class="plat">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
        <div class="circle5"></div>
    </div>

css

.circle1,.circle2,.circle3,.circle4,.circle5{
    width:100px;
    height: 100px;
    border-radius: 50%;
    border:10px solid black; 
    position: absolute;
}
.circle1{
    border-color:red;
    left:0;
    top:0;
}
.circle2{
    border-color:green;
    left: 130px;
    top:0;
}
.circle3{
    border-color:yellow;
    left:260px;
    top:0;
}
.circle4{
    border-color:blue;
    left:65px;
    top:70px;
}
.circle5{
    border-color:purple;
    left:195px;
    top:70px;
}
.plat{
    height: 190px;
    width:380px;
    position: fixed;
    left:50%;
    top:50%;
    margin-left:-190px ;
    margin-top:-95px;
}

两栏布局demo
两栏demo
html

 <div class="right"></div>
    <div class="left"></div>

css

/* 两栏布局 */
.right{
    position: absolute;
    right:0;
    width:100px;
    height:100px;
    background-color:#fcc;
}
.left{
    border:none;
    margin-right: 100px;
    height:100px;
    background-color:#ffc;
}

11、margin塌陷BUG

  1. 垂直方向的margin他们会基本粘合到一起取最大的值
  2. 触发bfc以解决margin塌陷的问题
  3. 如何触发bfc：
    position:absolute;
    display:inline-block;
    flot:right/left;
    overflow:hidden;

12、浮动模型 flout 及清除浮动的方法
浮动元素产生了浮动流
所有产生了浮动流的元素，块级元素看不到他们
产生了bfc的元素和文本类属性的元素，以及文本都能看到浮动元素
直接在父级上用清除浮动三连 就可以让下面的元素不受影响了
浮动demo
html

<div class="w">
        <div class="c">1</div>
        <div class="c">2</div>
        <div class="c">3</div>
        <div class="c">4</div>
        <div class="c">5</div>
        <div class="c">6</div>
        <div class="c">7</div>
        <div class="c">8</div>
        <div class="c">9</div>
    </div>

css

.w{
    width:306px;
    height:306px;
    border:1px solid black;
}
/* 清除浮动三件套 */
.w::after{
    content:"";
    clear: both;
    display: block;
}
.c{
    float: left;
    width:100px;
    height: 100px;
    background-color:black;
    color:#fff;
    margin:1px;
}

12、伪元素
before\after 每个元素都有这两个伪元素 但是要单独选出来才能修改 一般用伪元素来去除浮动流

导航栏demo
淘宝导航栏demo述
html

<ul class="nav">
        <li class="list-item"><a href="#">天猫</a></li>
        <li class="list-item"><a href="$">聚划算</a></li>
        <li class="list-item"><a href="#">天猫超市</a></li>
    </ul>

css

a{
    text-decoration: none;
    color:#f40;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    display: inline-block;
    height:30px;
    line-height: 30px;
    padding:0 5px;
}
.nav .list-item{
    list-style: none;
    float: left;
    margin:0 10px;
    height: 30px;
    line-height: 30px;
}
a:hover{
    color:#fff;
    background-color:#f40;
    border-radius: 15px;
}
.nav::after{
    content: "";
    clear: both;
    display: block;
}

13、文字溢出容器处理
单行文本超过容器的宽度的时候用…来展示
单行文本溢出处理demo
html

 <h3 class="yc">单行文本超过容器的宽度的时候用...来展示</h3>

css

.yc{
    width:200px;
    /* 文字一到边界的时候不要换行 直接横着给我顶过去 */
    white-space: nowrap;
    /* 隐藏溢出部分 */
    overflow: hidden;
    /* 溢出部分的文字用...来展示 */
    text-overflow: ellipsis;
}

多行文本不做打点只做截断 直接在文字后面手动加上…
多行文本溢出demo
html

<h3 class="yc1">多行文本不做打点只做截断 直接在文字后面手动加上...</h3>

css

.yc1{
    margin:0;
    padding:0;
    overflow: hidden;
    border:1px solid black;
    width:150px;  
    height: 40px;
    font-size: 16px;
}

14、背景图片处理
背景图片处理
html

  <div class="img"></div>

css

.img{
    width:200px;
    height:200px;
    /* 引入背景图片 */
    background-image: url(../img/10.jpg);
    border:1px solid black;
    /* 设置背景图片大小 */
    background-size:50px;
    /* 铺不满的时候不重复出现 */
    background-repeat: no-repeat;
    /* 背景图片定位 */
    background-position: center center;/* 居中 */
    /* background-position: top center; 上中 */
    /* background-position: bottom center; 下中 */
    /* background-position: left center; 左中 */
    /* background-position: right center; 右中 */
}

15、以图换字
以图换字demo
html

<a class="logo" href="https://www.taobao.com"></a>

css

.logo{
    display: inline-block;
    text-decoration: none;
    color:#424242;
    width:190px;
    height: 90px;
    background-image:url(../img/10.jpg)0 0 no-repeat;
    background-size: 190px 90px;
    border:1px solid black;
    text-indent: -9999px;
    white-space: nowrap;
    overflow: hidden;
}

16、淘宝自适应布局
淘宝自适应布局demo
html

<div class="wrapper">
        <div class="content"></div>
    </div>

css

.wrapper{
    height: 30px;
    background-color:#123;
}
.content{
    margin:0 auto;
    width:1200px;   
    height: 30px;
    background-color:#0f0;
}

17、设置了定位或者浮动了之后行级元素会自动转换为 行级块元素

18、一个文本类元素里面包含文字了 那么外面的文字就会和里面的文字底对齐
在这里插入图片描述
html

<span class="dq">123</span>呵呵

css

.dq{
    display:inline-block;
    width:100px;
    height: 100px;
    font-size: 50px;
    background-color:red;
    /* 调文本对齐线 */
    vertical-align: middle;
}

19、淘宝顶部导航栏左右浮动 在一行显示的结构
淘宝顶部导航栏左右浮动 在一行显示的结构
html

<div class="nav1">
        <ul class="contents">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ul class="contents1">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
            
    </div>

css

.contents{
    width:300px;
    background-color:#0f0;
    list-style: none;
    float: left;
}
.contents1{
    width:300px;
    background-color:#0f0;
    list-style: none;
    float: right;
}
.contents li,.contents1 li{
    float: left;
}
.nav1{
    background-color:black;
    width:auto;
    height:50px;
    line-height: 35px;
}
一切源于热爱
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS入门PPT
01-19
CSS入门，适合初学者，基础的CSS操作 CSS(Cascading Style Sheet)级联样式单（层叠样式表） HTML5建议把页面外观交给CSS控制。 优点： 表达效果丰富 （元素样式、精确定位） 文档体积小（重复定义 提高传输速度 ...
CSS 列表样式 (ul)
h13673476027的博客
11-14 1870
一些值是无序列表，以及有些是有序列表。 下列是对list-style-type属性的常见属性值的描述： none：不使用项目符号 disc：实心圆 circle：空心圆 square：实心方块 decimal：阿拉伯数字 lower-alpha：小写英文字母 upper-alpha：大写英文字母 lower-roman：小写罗马数字 upper-roman：大写罗马数字
css 恢复ulli_css控制UL LI 的样式详解(推荐)
weixin_39919089的博客
02-06 330
代码如下:首页博客设计相册论坛关于CSS:复制代码代码如下:#menu ul {list-style:none;margin:0px;}#menu ul li {float:left;}解释一下：#menu ul {list-style:none;margin:0px;}list-style:none，这一句是取消列表前点，因为我们不需要这些点。margin:0px，这一句是删除UL的缩进，这样做...
CSS入门：ol，ul列表用法详解（附案例）
最新发布
u013179804的博客
04-19 1010
无序列表（<ul>）和有序列表（<ol>）是 HTML 中常用的列表标签。它们在网页中是一种灵活且功能强大的组合方式，能够帮助设计师和开发者有效地组织和展示网页内容，提高页面的可读性、可访问性和用户友好性。ul：用于显示项目列表，项目之间没有顺序关系。默认使用实心圆（●）或者其他符号作为项目符号。ol：用于显示项目序号列表，项目之间有顺序关系，通常用于列出步骤、排名等内容。默认使用数字（1, 2, 3...）作为项目序号，可以通过 CSS 修改序号样式。
css系列-ol，ul
前端蜗牛君
12-14 2454
列表 #列表符号 使用list-style-type来设置列表样式，规则是继承的，所以在ul标签上设置即可。 值 描述 none 无标记。 disc 默认。标记是实心圆。 circle 标记是空心圆。 square 标记是实心方块。 decimal 标记是数字。 decimal-leading-zero 0开头的数字标记...
CSS教程：li和ul标签用法举例浅谈
xiaoweids的博客
05-29 768
ul>是项目列表，是列表项，项目列表就是用符号来列的，所以你列出来默认的就是黑点啦，还有一个是这个是编号列表，用数字来列的，也是用做列表项。是 list item 即列表项，但列表有很两种，所以外面得有 或者 用来区别无序列表（小点点）和有序列表（1,2,3...）。符号 if" width=10 height=10 border=0> 是当 type="circle" 时的列项符号。符号 是当 type="disc" 时的列项符号。
css入门入门入门入门
05-23
css入门入门入门入门
CSS入门讲解
10-11
WEB项目第二天，HTML和CSS入门讲解，内容还是比较详细的
CSS入门教程篇
10-30
CSS入门教程
css 入门基础教程
09-25
css 入门基础，适合刚开始学习css的朋友，最好先有一定的html编写经验。
css3-ul-ol列表
11-20
css3-ul-li 设计列表，好看的列表样式，欢迎下载哦。亲测
css+ul设计的多级导航菜单
03-19
使用ul+css设计的多级导航菜单，不用写javascript脚本；要想加子菜单，直接往下面加ul标签及子标签就可以了
html + css 入门教程
02-18
html + css 入门教程
CSS入门。（仅供参考）
01-08
文档出处部分Coogle和《原创》，如有雷同纯属巧合 《仅供参考》 首先说明以下内容是本人自己整理（仅供参考！！！！！！！！） 首先浏览器我建议使用Google Chrome ，Mozilla Firefox 编译器建议...5），CSS可以使
【CSS】1.实现ul两列分布
weixin_49015558的博客
05-30 279
【CSS】1.实现ul两列分布。
前端案例-css实现ul中对li进行换行
qq_43720551的博客
11-13 2429
我想要实现，在展示的item个数少于4个的时候，则排成一行，并且均分（比如说有3个，则每个的宽度为33.3%），如果item 个数大于4，则进行换行
HTML与CSS
2301_77083521的博客
07-03 455
子标签：dt：列表标题dd ：列表项CSS的最大贡献就是： 让 HTML 从样式中脱离， 实现了 HTML 专注去做 结构呈现，样式交给css我们理想中的结果： 结构(html)与样式(css)相分离CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
tailwindcss 入门
03-29
入门Tailwind CSS需要以下步骤： 1. 安装：使用npm或yarn安装Tailwind CSS。 2. 配置：创建一个配置文件（通常是`tailwind.config.js`），在其中定义你的自定义样式和配置选项。 3. 引入：在你的HTML或CSS文件中引入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值