CSS,html学习

已于 2023-05-13 18:39:11 修改
阅读量477 收藏
点赞数 1
文章标签： css 学习 前端
于 2023-05-09 21:20:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76884013/article/details/130572114
版权

1.css

1.1边框实现三角形

颜色：透明颜色 transparent


     <style>
    body{background-color: green;}
    div{ width: 0px;height: 0px;
        border-top-color:transparent;
        border-top-style: solid;
        border-top-width: 30px;
        border-right-color:red;
        border-right-style: solid;
        border-right-width: 30px;
        border-bottom-color:transparent;
        border-bottom-style: solid;
        border-bottom-width: 30px;
        border-left-color:transparent;
        border-left-style: solid;
        border-left-width: 30px;}
    </style>
</head>
<body>
    
</body>
</html>

1.2css文字样式

###(1)font-family : 字体类型
英文(不支持中文),中文（中文，英文都支持）
衬线体，非衬线体
注意点：
1.多个字体类型的设置目的（计算机识别自有字体）
2.引号的添加目的（英文有空格字体带引号）

<style>
       div{ font-family: Arial;}
   </style>
</head>
<body>
   <div>这是一段文字</div>
   <p>这是一段文字</p>
   <div>this is a text</div>
   <p>this is a text</p>
</body>
</html>

(2)font-size : 字体大小

默认16px
写法：number(px)| 单词（small large …不推荐使用）

 <style>
        div{font-size: 16px;}
    </style>
</head>
<body>
    <div>这是一段文字</div>
    <p>这是一段文字</p>
    <div>this is a text</div>
    <p>this is a text</p>
</body>
</html>

(3）font-weight : 字体粗细

模式： 正常（normal） 加粗（bold）
写法： 单词（normal,bold）| number( 100 200 … 900,100到500都是正常的，600到900都是加粗的)

<style>
        div{font-weight: 600;}
    </style>
</head>
<body>
    <div>这是一段文字</div>
    <p>这是一段文字</p>
    <div>this is a text</div>
    <p>this is a text</p>
</body>
</html>

(4) font-style : 字体样式

模式： 正常（normal） 斜体（italic）
写法：单词（normal，italic）
注：oblique也是表示斜体，用的比较少，了解即可
区别：1.italic带有属性倾斜字体的才可以设置倾斜操作。
2.oblique没有倾斜属性的字体也可以设置倾斜操作。

(5)color : 字体颜色

 <style>
        div{font-style: italic;}
    </style>
</head>
<body>
    <div>这是一段文字</div>
    <p>这是一段文字</p>
    <div>this is a text</div>
    <p>this is a text</p>
</body>
</html>

1.3css段落样式

（1）text-decoration: 文本装饰

下划线 ：underline
删除线 ：line-through
上划线 : overline
不添加任何装饰 ： none
注：添加多个文本修饰：用逗号隔开

 <style>
        p{width: 300px;text-decoration:underline, line-through;}
    </style>
</head>
<body>
    <p>这些年，中国坚持积极参与全球安全规则制定，加强国际安全合作，积极参与联合国维和行动，为维护世界和平和地区稳定发挥建设性作用。</p>
</body>
</html>

（2）text-transform: 文本大小写 （针对英文段落）

小写：lowercase
大写; uppercase
只针对首字母大写：capitalize

 <style>
        p{text-transform: lowercase;}
    </style>
</head>
<body>
    <p>
        qazws  xedcr  fvtGB  YHNUJ
    </p>
</body>
</html>

(3) text-indent: 文本缩进

首行缩进
em单位：相对单位，1em永远都是跟字体大小相同

(4) text-align : 文本对齐方式

对齐方式： left，right, center, justify(两端点对齐)

 <style>
        p{text-align: left;}
    </style>
</head>
<body>
    <p>
        这些年，中国坚持积极参与全球安全规则制定，加强国际安全合作，积极参与联合国维和行动，为维护世界和平和地区稳定发挥建设性作用。   
    </p>
</body>
</html>

(5)line-height:文本的行高

行高：一行文字的高度，上边距和下边距的等价关系。
默认行高：不是固定值，而是变化的。根据当前的字体大小在不断的变化的。
取值：1.number(px) | scale( 比例值，跟文字大小成比例 )

 <style>
        p{line-height: 20px;}
    </style>
</head>
<body>
    <p>
        这些年，中国坚持积极参与全球安全规则制定，加强国际安全合作，积极参与联合国维和行动，为维护世界和平和地区稳定发挥建设性作用。   
    </p>
</body>
</html>

(6)letter-spacing: 字之间的间距

word-spacing: 词之间的间距（针对英文段落）
英文和数字不自动折行的问题：
1.word-break : break-all;(非常强烈的折行)
2.word-wrap: break-word;(不是那么强烈的折行，会产生一些空白区域)

 <style>
        p{letter-spacing: 5px;}
    </style>
</head>
<body>
    <p>
        这些年，中国坚持积极参与全球安全规则制定，加强国际安全合作，积极参与联合国维和行动，为维护世界和平和地区稳定发挥建设性作用。   
    </p>
</body>
</html>

 <style>
     div{width: 300px;height: 300px;border:1px solid red; word-break:break-all}  
    </style>
</head>
<body>
    <p>
        这些年，中国坚持积极参与全球安全规则制定，加强国际安全合作，积极参与联合国维和行动，为维护世界和平和地区稳定发挥建设性作用。   
    </p>
    <div> 
        qswqdfwfaennvejjkabhejavbehvlbfhavfavfeavefvfsVadaVdavavfdsavaavdsavdsavavVDA  
    </div>
</body>
</html>

(7)文本与段落实现个人简介

 <style>
    div{width: 800px;}
    h1{text-align: center;color: #ff6600;}
    h2{color: #00a0ff;text-indent: 2em;}
    #p1{font-style: italic;font-weight: bold;}
    #p2{color: #66ff00;line-height: 30px;text-indent: 2em;}
    #p3{color: #00ffff;line-height:30px;text-indent: 2em;text-decoration: underline;font-style: italic;}
    </style>
</head>
<body>
    <div>
        <h1>张婧仪简介</h1>
        <h2>基本信息</h2>
        <p id="p1">张婧仪，1999年7月10日出生于湖南省邵阳市，中国内地女演员，毕业于北京电影学院2017级表演系本科班。</p>
        <h2>早年经历</h2>
        <p id="p2">2018年，张婧仪签约由陈坤与周迅共同创立的“东申未来” 影视公司；同年12月，出演个人首部电视剧《风犬少年的天空》。2019年，主演沙漠执导的电影《我要我们在一起》。2020年，参与录制湖南卫视综艺节目《向往的生活第四季》。2021年6月，获得微博电影之夜年度潜力演员荣誉 ；9月，其主演的电影《关于我妈的一切》上映；11月9日，与陈星旭合作主演的民国剧《一见倾心》播出。2022年6月，出演电影《群星闪耀的夜晚》；11月3日，主演的青春都市情感剧《点燃我，温暖你》播出。</p>
        <h3>个人生活</h3>
        <p id="p3">张婧仪初中和高中就读于长沙同升湖实验学校，在校期间，她多次参加学校的艺术节、校园新闻的录制。2017年2月，张婧仪独自坐飞机去北京参加艺术校考，在这个月里，她坐了8趟飞机，往返于北京、上海和长沙，最终在艺考中获得北京电影学院和中央戏剧学院等九所高校专业的合格证。6月24日，高考成绩发布，张婧仪以480分的成绩被北京电影学院表演系录取。同年11月，她还与关晓彤、王俊凯等一同参与共青团中央《中国梦》MV拍摄</p>
    </div>
    
</body>
</html>

1.4css复合样式

复合的写法，是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background,border;有的是需要关心顺序，例如font。

（1）background:red url() repeat 0 0;

(2) border: 1px red

(3) font :

注：最少要有两个值 size family
weight style size family √
style weight size family √
weight style size/line-height family √
注：如果非要混合去写的话，那么要先写复合样式，再写单一样式，这样样式才不会被覆盖掉。

<style>
        div{width: 300px;height:300px;background:red url(./img/dog.jpg)no-repeat  center center;
        border: 2px black solid;
        font :bold italic 宋体 30px/40px;

        }
    </style>
</head>
<body>
    
</body>
</html>

1.5css选择器

（1）ID选择器

#elem{} id=“elem”
注：1.ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。
2.命名的规范，由字母，下划线，字母（并且第一个不能是数字）
3.驼峰写法：searchButton(小驼峰) SearchButton(大驼峰) searchSmallButton
短线写法：search-small-button
下划线写法：search_small_button

 <style>
 #div1{background: red;}
 #div2{background:blue;}
 </style>
</head>
<body>
 <div id="div1">这是一个块</div>
 <div id="div2">这又是一个块</div>
 

</body>
</html>

(2)CLASS选择器

.elem{} class=“elem”
注：1.class选择器是可以复用的。
2.可以添加多个class样式。
3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
4.标签+类的写法

 <style>
    .box{background: red;}
    </style>
</head>
<body>
    <div class="box">这是一个块</div>
    <div class="box">这又是一个块</div>
    <p class="box">这是一个段落</p>
</body>
</html>

(3)标签选择器（TAG选择器）

div{} < div > < /div >
使用的场景：
1.去掉某些标签的默认样式时
2.复杂的选择器中，如 层次选择器

（4）群组选择器（分组选择器）

可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用。

<style>
    div,#text,.title{background: red;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <p id="text">这是一个段落</p>
</body>
</html>

（5）通配选择器

*{ }->div,ul,li,p,h1,h2…{}
注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。
使用的场景：
1.去掉所有标签的默认样式时

 <style>
   *{border:1px red solid}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <p id="text">这是一个段落</p>
</body>
</html>

（6）层次选择器

后代 M N { }
父子 M >N { }
兄弟 M~N{ } 当前M下面的所有兄弟N标签
相邻 M+N{ }当前M下面相邻的N标签

 <style>
   #list li{border:1px red solid;}
    </style>
</head>
<body>
    <ul id="list">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</body>
</html>

 <style>
   #list >li{border:1px red solid;}
    </style>
</head>
<body>
    <ul id="list">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</body>
</html>

 <style>
   div~h2{background: red;}
    </style>
</head>
<body>
   <div>这是一个块</div>
   <p>这是一个段落</p>
   <h2>这是一个标题</h2>
</body>
</html>

 <style>
   div+h2{background: red;}
    </style>
</head>
<body>
   <div>这是一个块</div>
   <h2>这是一个标题</h2>
   <p>这是一个段落</p>
</body>
</html>

(7）属性选择器

M[attr] { }
= ：完全匹配
*= ：部分匹配
^= ：起始匹配
$= ：结束匹配
[ ][ ][ ] :组合匹配

<style>
   div[class="box"]{background: red;}
    </style>
</head>
<body>
 <div>aaaaa</div>  
 <div class="box">aaaaa</div>
 <div class="search">aaaaa</div>
</body>
</html>

<style>
   div[class="box"][id]{background: red;}
    </style>
</head>
<body>
 <div>aaaaa</div>  
 <div class="box" id="elem">aaaaa</div>
 <div class="search">aaaaa</div>
</body>
</html>

(8)伪类选择器

M：伪类{ }
:link 访问前的样式 （只能添加给a标签）
:visited 访问后的样式 （只能添加给a标签）
:hover 鼠标移入时的样式 （可以添加给所有的标签）
:active 鼠标按下时的样式 （可以添加给所有的标签）
注：一般网站都只设置
a{ } (link visited active)
a:hover{ }

<style>
   div{width:200px;height:200px;background:red}
   div:hover{background: blue;}
   div:active{background: green;}
   
    </style>
</head>
<body>
 
</body>
</html>

 <style>
     a:link{color:red;}
     a:link{color:blue;}
     a:link{color:green;}
     a:link{color:yellow;}
    </style>
</head>
<body>
 <a href="#">这是一个链接</a>
</body>
</html>

：after,:before 通过伪类的方式给元素添加一段文本内容，使用content属性
：checked,:disabled,:focus 都是针对表单元素的

<style>
    div::after{content: "word";}
    </style>
</head>
<body>
 <div>hello</div>
</body>
</html>

 <style>
    :checked{width:100px;height:100px;}
    </style>
</head>
<body>
     <input type="checkbox">
     <input type="checkbox" >
     <input type="checkbox">
</body>
</html>

结构性伪类选择器
nth-of-type()
nth-child()
角标是从1开始的，1表示第一项，2表示第二项 | n值 表示从0到无穷大
first-of-typle
last-of-type
only-of-type(只有一个的时候用)

nth-of-type() 和 nth-child()之间的区别
type: 类型
child:孩子

 <style>
    li:nth-of-type(2n+1){background: red;}
    li:nth-of-type(2n){background: blue;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

<style>
    li:first-of-type{background: blue;}
    li:last-of-type{background: red;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

1.6css样式继承

文字相关的样式可以被继承
布局相关的样式不能被继承（默认是不能被继承的，但是可以设置继承属性 inherit值）

<style>
        div{width:300px;height:300px;border:1px red solid;color: red;font-size: 30px;}
        p{border:inherit;}
    </style>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
</body>
</html>

1.7css优先级

（1）相同样式优先级

当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况

（2）内部样式与外部样式

内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。

 <style>
    div{color: red;}   
    </style>
    <link rel="stylesheet" href="./base.css">
</head>
<body>
    <div>这是一个块 </div>
</body>
</html>

(3)单一样式优先级

style行间>id>class>tag>*>继承
注：style行间 权重 1000
id 权重 100
class 权重 10
tag 权重 1

 <style>
    #elem{color:red;}
    </style>
</head>
<body>
    <div id="elem" style="color:blue">这是一个块 </div>
</body>
</html>

(4)!important

提升样式优先级，非规范方式，不建议使用。（不能针对继承的属性进行优先级的提升）

<style>
    #elem{color: red ;}
    *{color:green !important;}
    </style>
</head>
<body>
    <div id="elem" style="color:blue">这是一个块 </div>
</body>
</html>

（5）标签+类与单类

标签+类>单类

<style>
    .box{color: red;}
    div.box{color:blue;}
    </style>
</head>
<body>
    <div class="box">这是一个块 </div>
</body>
</html>

(6) 群组优先级

群组选择器於单一选择器的优先级相同，靠后写的优先级高。

 <style>
    div,p{color: red;}
    div{color:blue;}
    </style>
</head>
<body>
    <div class="box">这是一个块 </div>
    <p>这是一个段落</p>
</body>
</html>

(7)层次优先级

权重比较
ul li .box p input{ } 1+1+10+1+1
.hello span #elem{ } 10+1+100
约分比较
ul li p input{ } li p input{ }
.hello span #elem{ } #elem{ }

1.8 css盒子模型

组成：content -> padding -> border -> margin
物品 填充物 包装盒 盒子与盒子之间的间距
content : 内部区域 width和height组成

(1)padding：内边距（内填充）

只写一个值: 30px（上下左右）
写两个值 ：30px 40px (上下左右)
写四个值：30px 40px 50px 60px(上，右，下，左)
但一样是只能写一个值
padding-left
padding-right
padding-top
padding-bottom

<style>
    #box{ width:200px;height:200px;background:red;border:10px blue soild;
         padding : 30px;

    }
    </style>
</head>
<body>
    <div id="box">这是一个盒子</div>
</body>
</html>

(2)margin : 外边距(外填充)

margin-left
margin-right
margin-top
margin-bottom
注：1.背景色填充到margin以内的区域，（不包括margin区域）
2.文字在content区域添加。
3.padding不能为负数，而margin可以为负数。

 <style>
   #box{ width:200px;height:200px;background:red;border:10px blue soild;
        padding : 30px;
   }
   #box2{width:200px;height:200px;background:black;color: white;
        }
   </style>
</head>
<body>
   <div id="box">这是一个盒子</div>
   <div id="box2">这是一个盒子</div>
</body>
</html>

(3)box-sizing:盒尺寸，可以改变盒子模型的展示形态。

默认值:content-box : width,height-> content
border-box : width,height -> content padding border
使用的场景：1.不用再去计算一些值
2.解决一些100%的问题

<style>
   #box{width:200px;height:200px;background:red;border:10px blue  solid;padding : 30px 50px;
    box-sizing: border-box;}
    input{width:100%;padding: 30px;box-sizing: border-box;}
    </style>
</head>
<body>
    <div id="box">这是一个盒子</div>
</body>
</html>

（4）盒子模型的一些问题：

1.margin叠加问题，出现在上下margin同时存在的时候。会取上下叠加中值较大的作为叠加的值。

<style>
   #box1{width:200px;height:200px;background:red;margin-bottom:30px;}
   #box2{width:200px;height:200px;background:blue;margin-top: 30px;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

2.margin传递问题，出现在嵌套的结构中，只是针对margin-top

  <style>
   #box1{width:200px;height:200px;background:red;}
   #box2{width:100px;height:100px;background:blue;margin-top: 100px;}
    </style>
</head>
<body>
    <div id="box1">
    <div id="box2"></div>
</div>
</body>
</html>

(5)盒子模型扩展

1.margin左右自适应是可以的，但是上下自适应是不行的。(上下自适应在第二大部分)

 <style>
   #box1{width:400px;height:100px;background:red;margin:0 auto;}
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

2.width,height不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码。

<style>
   #box1{width:300px;height:300px;background:red;}
   #box2{height:100px;;background:blue;color: white;padding-left: 10px black solid;}
    </style>
</head>
<body>
    <div id="box1">
        <divid  id="box2">这是一些内容</div>
    </div>
</body>
</html>

(6)盒子模型的嵌套练习

<style>
   #box1{width:350px;height:350px;border: 1px black dashed;padding:27px;}
   #box2{border:5px #d7effe solid;padding: 20px;}
   #box3{background:#ffa0df;padding: 41px;}
   #box4{border:1px white dashed;padding:3px;}
   #box5{border:1px white dashed;padding: 49px;}
   #box6{width:100px; height:100px; background:#96ff38;border:#fdff00}
    </style>
</head>
<body>
    <div id="box1">
        <divid  id="box2">
            <div id="box3">
                <div id="box4">
                    <div id="box5">
                        <div id="box6"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

1.9标签分类

（1）按类型划分标签

block:div,p,ul,li,h1…

1.独占一行
2.支持所有样式
3.不写宽的时候，跟父元素的宽相同
4.所占区域是一个矩形

inline:span,a,em,strong,img…

1.挨在一起的
2.有些样式不支持，例如：width,height,margin,padding
3.不写宽的时候，宽度由内容决定
4.所占的区域不一定是矩形
5.内联标签之间会有空隙，原因：换行产生的

inline-block:input,select…

1.挨在一起，但是支持宽高
注:布局一般用块标签，修饰文本一般用内联标签

（2）按内容划分标签

Flow:流内容
Metadata:元数据
Section:分区
Heading:标题
Phrasing:措辞
Embedded:嵌入的
Interactive:互动的
（详情：https://www.w3.org/TR/htmls/dom.html）

（3）按显示

替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。
img , input …
非替换元素：将内容直接告诉浏览器，将其显示出来。
div , h1 , p …

1.10显示框类型

display:block inline inline-block none …
区别
display:none 不占空间的隐藏
visibility:hidden 占空间的隐藏

<style>
    div{width: 100px;height: 100px;background: red;display: inline;}
    span{width: 100px;height:100px;background: red;display: block;}
    input{display: none;}
</style>
    
</head>
<body>
    <div>块1</div>
    <div>块2</div>
    <span>内联1</span>
    <span>内联2</span>
</body>
</html>

<style>
    #box1,box2{width: 100px;height: 100px;background: red;}
    #box1{display: none;}
</style>
    
</head>
<body>
    <div id="box1">块1</div>
    <div id="box2">块2</div>
    
</body>
</html>

1.11标签嵌套规范

ul.li
dl,dt,dd
table,tr,td

块能够嵌套内联
<div>
    <span></span>
    <a href="#"></a>
</div>

块嵌套块

<div>
       <div></div>
</div>

特殊：
错误的写法

<p>
     <div></div>
</p>

内联是不能嵌套块的
错误的写法：

<span>
       <div></div>
<span>

特殊：
正确的写法：

<a  href="#">
        <div><div>
 </a>

1.12溢出隐藏

overflow :
visible : 默认
hidden
scroll
auto
x轴，y轴
overflow-x,overflow-y针对两个轴分别设置

<style>
   div{width:300px;height:200px;bordeer:1px black soild;overflow: hidden;}
</style>
    
</head>
<body>
    <div>
         溢出隐藏 溢出隐藏 溢出隐藏
         溢出隐藏 溢出隐藏 溢出隐藏
         溢出隐藏 溢出隐藏 溢出隐藏
         溢出隐藏 溢出隐藏 溢出隐藏
         溢出隐藏 溢出隐藏 溢出隐藏
         溢出隐藏 溢出隐藏 溢出隐藏
         溢出隐藏 溢出隐藏 溢出隐藏
         溢出隐藏 溢出隐藏 溢出隐藏
         溢出隐藏 溢出隐藏 溢出隐藏
    </div>
</body>
</html>

1.13透明度与手势

opacity:o(透明) ~ 1(不透明)
0.5(半透明)
注：占空间，所有的子内容也会透明。
rgba() : 0~1
注：可以让指定的样式透明，而不影响其他样式。

<style>
   #div1{width:100px;height:100px;background: red;opacity:0.5;}
   #div2{width:100px;height:100px;background:rgba(255, 0, 0, 0.5);}
</style>
    
</head>
<body>
    <div id="div1">这是一个块 </div>
    <p>这是一个段落</p>
    <div id="div2">这又是一个块</div>
</body>
</html>

cursor : 手势
default : 默认箭头
要实现自定义手势：
准备图片： .cur , .ico
cursor:url(./img/cursor.ico),auto;

<style>
  #div1{width:100px;height:100px;background: red;opacity:0.5;}
  #div2{width:100px;height:100px;background:rgba(255, 0, 0, 0.5);
      cursor:url(./img/cursor.ico),auto;
      }
</style>
   
</head>
<body>
   <div id="div1">这是一个块 </div>
   <p>这是一个段落</p>
   <div id="div2">这又是一个块</div>
</body>
</html>

1.14最大，最小宽高

min-width,min-height
max-width,max-height

<style>
   div{width:200px;min-height:200px;border:1px  red solid;}
</style>
    
</head>
<body>
    <div>
        这是一段内容
        这是一段内容
        这是一段内容
        这是一段内容
        这是一段内容
        这是一段内容
        这是一段内容
        这是一段内容
        这是一段内容
        这是一段内容
        这是一段内容
        这是一段内容
    </div>
</body>
</html>

%单位：换算 -> 以父容器的大小进行换算的
一个容器怎么适应屏幕的高： 容器加height:100%; body:100%; html: 100%;
html,body{height:100%;}
.contrainer{height:100%;}

<style>
   #box1{width:200px;min-height:200px;background:  red ;}
   #box2{width:100%;min-height:50%;background: blue;}

</style>
    
</head>
<body>
    <div id="box1">
       <div id="box2"></div>
    </div>
</body>
</html>

1.15css默认样式

没有默认样式的：div , span
有默认样式的:
body -> marign :8px
h1 -> margin : 上下 21.440px
p -> margin ： 上下 16px
ul -> margin : 上下 16px padding :左 40px
默认点：list-style : disc
a -> text-decoration: underline;

1.16css重置样式

css reset :
*{margin:0; padding:0;}
优点：不用考虑哪些标签有默认的margin和padding
缺点：稍微的影响性能
body,p,h1,ul{margin:0; padding:0;}
ul{list-style : none;}
a{text-decoration: none;color: #999;}

  <style>
        ul{list-style:none;}
        a{text-decoration: none;color: #999;}
        a:hover{text-decoration: underline;color:red;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <span></span>
    <h1></h1>
    <p></p>
    <ul>
        <li></li>
    </ul>
    <a href="#">这是一个链接</a>
</body>
</html>

img{dispaly:block}
问题的现象：图片跟容器底部有一些空隙。
内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的
vertical-align: baseline; 基线对齐方式，默认值
img{vertical-align: bottom;}解决方式是推荐的

<style>
      div{border:1px black solid;}
      img{vertical-align: bottom;}
   </style>
</head>
<body>
   <div>
       <img src="./img/dog.jpg" alt="">
   </div>
</body>
</html>

写具体页面的时候或一个布局效果的时候：
1，写结构
2，css重置样式
3，写具体样式

1.17 css float浮动

脱离文档流，延迟父容器靠左或靠右进行排列。
left,right,none
加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动元素，会挨着浮动的元素进行排列。

(1)float注意点：

1.只会影响后面的元素
2.内容默认提升半层
3.默认宽根据内容决定
4.换行排列
5.主要给块元素添加，但也可以给内联元素添加。

<style>
        body{border: 1px black solid;}
        #box1{width: 100px;height:100px;background:yellow;float: left;}
        #box2{width: 200px;height:200px;background:red;float: left;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box1"></div>
</body>
</html>

(2)如何清除浮动

上下排列：clear属性，表示清除浮动的，left,right,both。

 <style>
        #box1{width: 100px;height:100px;background:red;float: left;}
        #box2{width: 200px;height:200px;background:blue;clear: both;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box1"></div>
</body>
</html>

嵌套排列：
固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果。
父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素。
overflow:hidden(BFC规范)，如果有子元素想溢出，那么会受到影响。
display:inline-block(BFC规范)，不推荐，父容器会影响到后面的元素。
设置空标签：不推荐，会多添加一个标签。
after伪类：推荐，是空标签的加强版，目前各大公司的做法。
（clear属性只会操作块标签，对内联标签不起作用）

 <style>
        #box1{width: 200px;border: 1px black solid;}
        #box2{width: 100px;height:200px;background:red;float:left;}
        .clear:after{content: '';clear:both;display:block;}
    </style>
</head>
<body>
    <div id="box1" class="clear">
        <div id="box2"></div>
    </div>
    aaaaaaa
</body>
</html>

（3）float制作页面小结构

<style>
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        img{display: block;}
        a{text-decoration: none;color: #666;}
        h1,h2,h3{font-size: 16px;}

        .l{float: left;}
        .r{float: right;}
        .clear::after{content: "";display: block;clear: both;}

        #main{width: 366px;margin: 20px auto;}
        #main .title{height: 23px;line-height: 23px;font-size: 12px;font-weight: bold;padding-left: 30px;  
              background:url(./img2/bg_line.png)repeat-x 6px 4px,url(./img2/bg_title.png)no-repeat;
        }
        #main ul{overflow: hidden;margin-top: 13px;}
        #main li{margin-bottom: 22px;}
        #main .pic{width:99px;border:1px soild #c8c4d3;margin-left: 5px;}
        #main .pic img{margin: 2px;}
        #main .content{width:240px;margin-left: 13px;}
        #main .content h2{font-size: 12px;line-height: 24px;}
        #main .content p{font-size: 12px;line-height: 20px;}

    </style>
</head>

<body>
    <div id="main">
        <h2 class="title">外媒评论精选</h2>
        <ul>
            <li class="clear">
                <div class="1 pic">
                    <a href="#">
                        <img src="./img2/img.png" alt="">
                    </a>
                </div>
                <div class="1 content">
                    <h2>测试标题测试标题 </h2>
                    <p>
                        测试段落测试段落测试段落测试段落测试段落
                        <a href="#">[详细]</a>
                    </p>
                </div>
            </li>
            <li class="clear">
                <div class="1 pic">
                    <a href="#">
                        <img src="./img2/img.png" alt="">
                    </a>
                </div>
                <div class="1 content">
                    <h2>测试标题测试标题 </h2>
                    <p>
                        测试段落测试段落测试段落测试段落测试段落
                        <a href="#">[详细]</a>
                    </p>
                </div>
            </li>
            <li class="clear">
                <div class="1 pic">
                    <a href="#">
                        <img src="./img2/img.png" alt="">
                    </a>
                </div>
                <div class="1 content">
                    <h2>测试标题测试标题 </h2>
                    <p>
                        测试段落测试段落测试段落测试段落测试段落
                        <a href="#">[详细]</a>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

1.18css定位

position:
static(默认)
relative
absolute
fixed
sticky

(1)relative:（相对定位）

如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流
不影响其他元素布局
left,top,right,bottom是相对于当前元素自身进行偏移的

 <style>
     #box1{width: 100px;height: 100px;background: red;} 
     #box2{width: 100px;height: 100px;background: blue;position: relative;left: 100px;top: 100px;}   
     #box3{width: 100px;height: 100px;background: yellow;}   
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>

(2)absolute:（绝对定位）

使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对，相对，固定）

   <style>
     #box1{width: 100px;height: 100px;background: red;position: absolute;} 
     #box2{width: 200px;height: 200px;background: blue;}   
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

(3)fixed:(固定定位)

使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽高根据内容决定（让块具备内联的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     body{height: 2000px;} 
     div{position:fixed;bottom: 0;right: 0;}
    </style>
</head>
<body>
 <div>这是一个块</div>
</body>
</html>

（4）stickly黏性定位：

在指定的位置，进行黏性操作。

 <style>
     body{height: 2000px;}
     div{background: red;position: sticky;top: 0;}
    </style>
</head>
<body>
    <P>aaaaaa</P>
    <P>aaaaaa</P>
    <P>aaaaaa</P>
    <P>aaaaaa</P>
    <P>aaaaaa</P>
    <P>aaaaaa</P>
<div>这是一个块</div>
    <P>aaaaaa</P>
    <P>aaaaaa</P>
    <P>aaaaaa</P>
    <P>aaaaaa</P>
    <P>aaaaaa</P>
    <P>aaaaaa</P>
</body>
</html>

(5)定位实现下拉菜单

 <style>
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        #menu{width: 100px;height: 30px;margin: 20px auto;border: 1px black solid;position: relative;}
        #menu ul{width: 100px;border: 1px black solid;position: absolute;left: -1px;top: 30px;background: white;display: none;
        }
        #menu:hover ul{display: block;}
        #menu ul li:hover{background: gray;}
        p{text-align: center;}
    </style>
</head>
<body>
    <div id="menu">
        卖家中心
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
            <li>列表项4</li>
        </ul>
    </div>
    <p>测试段落测试段落测试段落测试段落测试段落</p>
</body>
</html>

(6)定位实现居中和装饰点

<style>
    #box1{width: 300px;height: 300ox;border: 1px black solid;position: relative;}
    #box2{width: 100px;height: 100px;background: red;position: absolute;left: 50%;top: 50%;margin: 50px 0 0 --50px;}
</style>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

 <style>
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        img{display: block;}
        a{text-decoration: none;color: #666666;}
        h1,h2,h3,h4,h5,h6{font-size: 16px;font-weight: normal;}

        #main{margin: 20px auto;width: 238px;border:1px solid #d9e0ee;border-top: 3px #ff8400 solid;}
        #main h2{height: 35px;border-bottom:1px solid #d9e0ee;line-height: 35px;padding-left:11px ;}
        #main h2 a{color: black;}
        #main h2 a:hover{color: #ff8400;}
        #main div img{margin:8px auto 3px auto;}
        #main ul{font-size: 12px;line-height: 24px;margin-bottom: 8px;}
        #main ul li{ padding-left: 18px;position: relative;}
        #main ul li::before{content: "";display: block;width: 3px;background: red;position: absolute;
        left: 8px; top: 50%;margin-top: -2px;}
        #main ul li.first-line{border-bottom:1px solid #d9e0ee;padding-bottom: 3px;margin-bottom: 8px;}
        #main ul a{}
        #main ul a:hover{ color:#ff8400 ;text-decoration: underline;}

    </style>
</head>
<body>
    <div id="main">
        <h2>
            <a href="#">搜索趣图</a>
        </h2>
        <div>
            <a href="#">
                <img src="./img/img.png" alt="">
            </a>
        </div>
        <ul>
            <li class="first-line">
                 <a href="#">测试文字测试文字测试文字</a>
            </li>
            <li>
                <a href="#">测试文字测试文字测试文字</a>
            </li>
            <li>
                <a href="#">测试文字测试文字测试文字</a>
            </li>
        </ul>

    </div>
</body>
</html>

1.19css添加省略号

width 必须有一个固定的宽
white-space:nowrap 不让内容折行
overflow:hidden 隐藏溢出的内容
text-overflow:ellipsis 添加省略号

<style>
    #content{width: 200px;border: 1px black solid;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
</style>
<body>
    <div id="content">测试文字测试文字测试文字测试文字测试文字测试文字</div>
</body>
</html>

1.20css精灵及好处

特性：
css雪碧也叫做css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。
好处：
可以减少图片的质量，网页的图片加载速度快
减少图片的请求次数，加快网页的打开

<style>
 #box1{width: 200x;height: 21px;background: url(./sprite_icon.png)no-repeat left -596;}
 #box2{width: 300px;height: 50px;border:1px black solid; line-height: 50px;padding-left: 30px; background: url(./sprite_icon.png) no-repeat left -596px;} 
</style>
<body>
 <div id="box1">
  <div id="box2"></div>
 </div>
</body>
</html>

1.21css圆角设置

<style>
 #box{width: 200x;height: 200px;background:red;border-radius: 20px;}
</style>
<body>
 <div id="box"></div>
</body>
</html>

2.photoshop工具

2.1photoshop使用

组成：
菜单项
工具栏
辅助面板

快捷键：
ctrl + r : 显示隐藏标尺
在标尺上可以拖拽参考线
可以通过移动工具拖拽回去，也可以在视图菜单中选择清除的所有参考线
图层中的小眼睛可以对当前图层进行显示隐藏
alt + 滚轮 ：可以对图片进行放大缩小

2.2png等图片的切图流程：

1.通过矩形选框工具，选择指定的区域
微调： alt 减少区域 shift 增加区域 上下左右键进行微调
利用参考线记录量取的位置，以便以后测量其他的值
2.ctrl + C : 复制图层
3.ctrl + n : 新建图层
4.ctrl + v : 粘贴图层
5.存储为web格式

2.3新浪的小结构

<style>
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        img{display: block;}
        a{text-decoration: none;color: #666666;}
        h1,h2,h3,h4,h5,h6{font-size: 16px;font-weight: normal;}

        #main{margin: 20px auto;width: 238px;border:1px solid #d9e0ee;border-top: 3px #ff8400 solid;}
        #main h2{height: 35px;border-bottom:1px solid #d9e0ee;line-height: 35px;padding-left:11px ;}
        #main h2 a{color: black;}
        #main h2 a:hover{color: #ff8400;}
        #main div img{margin:8px auto 3px auto;}
        #main ul{font-size: 12px;line-height: 24px;margin-bottom: 8px;}
        #main ul li{ padding-left: 18px;background: url(./img/dot.png) no-repeat 8px center;}
        #main ul li.first-line{border-bottom:1px solid #d9e0ee;padding-bottom: 3px;margin-bottom: 8px;}
        #main ul a{}
        #main ul a:hover{ color:#ff8400 ;text-decoration: underline;}

    </style>
</head>
<body>
    <div id="main">
        <h2>
            <a href="#">搜索趣图</a>
        </h2>
        <div>
            <a href="#">
                <img src="./img/img.png" alt="">
            </a>
        </div>
        <ul>
            <li class="first-line">
                 <a href="#">测试文字测试文字测试文字</a>
            </li>
            <li>
                <a href="#">测试文字测试文字测试文字</a>
            </li>
            <li>
                <a href="#">测试文字测试文字测试文字</a>
            </li>
        </ul>

    </div>
</body>
</html>

2.4PSD源文件切图流程

第一步：编辑->首选项->赠效工具->勾上启用生成器
第二步：文件->生成->勾上图像资源
第三步：勾上自动选择->改图层名为***-psd.png

2.5企业切图流程

利用工具快速获取样式
蓝湖：https://lanhuapp.com

木瞳libra
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML和Css的学习
SYX_lh的博客
10-19 3452
学习HTML和Css
CSS 学习
qq_67858958的博客
04-02 607
一 CSS 是 Cascading Style Sheet 的缩写，层叠样式表，用来控制 HTML 文档的显示样式，即美化网页，可对网页中元素的位置、字体、颜色、背景等属性进行精确控制。CSS 是一种标准的描述性样式语言，而不是编程语言，所以没有逻辑处理能力。 二 CSS引入方式： 1. 使用style标签 编写css代码 调试代码时使用 2. 使用link标签 引入css文件 上线前使用 3. 元素上使用通用属性 style ...
HTML+CSS学习总结
weixin_53351919的博客
06-26 2789
html+css学习总结
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS学习
qq_33302076的博客
10-16 648
CSS简介 CSS概述 CSS指层叠样式表（Cascading Style Sheets） 样式定义如何显示HTML元素，通常存储在样式表中，解决内容与表现分离的问题 外部样式表通常存储在CSS文件中，可以极大提高工作效率 多个样式定义可层叠为一 层叠次序 浏览器缺省设置 < 外部样式表 < 内部样式表（位于< head>标签内部）< 内联样式（在HTML元素标签...
html css 综合学习.zip
12-30
html css 综合学习html css 综合学习html css 综合学习html css 综合学习html css 综合学习 html css 综合学习html css 综合学习html css 综合学习html css 综合学习html css 综合学习 html css 综合学习html css ...
html css js学习.zip
12-30
html css js学习html css js学习html css js学习html css js学习 html css js学习html css js学习html css js学习html css js学习 html css js学习html css js学习html css js学习html css js学习 html css js学习...
html+css学习.zip
01-01
html+css学习html+css学习html+css学习html+css学习html+css学习 html+css学习html+css学习html+css学习html+css学习html+css学习 html+css学习html+css学习html+css学习html+css学习html+css学习 html+css学习...
HTML和CSS学习.zip
01-01
HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习...
css、html 学习.zip
12-28
css、html 学习css、html 学习css、html 学习css、html 学习 css、html 学习css、html 学习css、html 学习css、html 学习 css、html 学习css、html 学习css、html 学习css、html 学习 css、html 学习css、html 学习...
2024年公共文化与社会服务国际会议（ICPCSS 2024）
wx19980549140的博客
07-12 1030
2024年公共文化与社会服务国际会议是一个集学术性、实践性和国际性于一体的盛会。我们期待与您共同探讨公共文化与社会服务的未来发展方向，为推动该领域的持续创新与发展贡献智慧和力量。随着社会的不断发展，公共文化与社会服务的重要性日益凸显。为了促进该领域的学术交流与合作，2024年公共文化与社会服务国际会议应运而生。本次会议旨在汇聚全球专家学者，共同探讨公共文化与社会服务的最新研究成果、发展趋势及面临的挑战，以推动该领域的持续创新与发展。
CSS实现table表格：隔行换色的效果
pan_junbiao的博客
07-12 343
表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号表示。定义表格光使用是不够的，还需要定义表格中的行、列、标题等内容。在CSS中，可以使用 nth-child 选择器来实现隔行换色。该选择器用于匹配父元素中的特定子元素，nth-child(odd) 可以匹配奇数行，nth-child(even) 可以匹配偶数行。使用CSS样式实现 table 表格隔行换色的效果。
CSS实现从上往下过渡效果
m0_56164131的博客
07-11 247
要实现一个从上往下显示的过渡效果，可以使用CSS的@keyframes规则来创建一个动画，使得元素在垂直方向上逐渐改变其位置。
css画半圆&&画圆弧
M1512415的博客
07-12 218
【代码】css画半圆&&画圆弧。
CSS图像不透明度的艺术：探索透明度控制的无限可能
最新发布
Lesleyhnj的博客
07-15 112
在网页设计中，图像的不透明度（Opacity）和透明度（Transparency）是两个关键的概念，它们不仅影响着页面的视觉效果，还能增强用户体验，创造丰富的交互效果。通过调整图像的不透明度，设计师可以实现元素间的层次感，营造柔和或梦幻的氛围，甚至在动画和过渡效果中发挥重要作用。本文将从不同角度深入探讨CSS中控制图像不透明度的技术，帮助你掌握这一技能，提升网站的美学品质。定义与作用： 属性允许我们改变HTML元素的不透明度，取值范围是0到1之间，其中0表示完全透明，1表示完全不透明。这个属性应用于整个元素
CSS变换
m0_63165331的博客
07-14 533
本文主要讲述CSS中的变换相关内容。
CSS上下悬浮特效
m0_56164131的博客
07-09 758
要实现一个上下悬浮的特效，可以使用CSS的@keyframes规则和动画属性。
CSS【详解】边框 border，边框-圆角 border-radius，边框-填充 border-image，轮廓 outline
朝阳39的博客
07-10 1156
template > < div class = " border-dashed " > 1:1的虚线 </ div > </ template > < style scoped > .border-dashed {< template > < div class = " border-dashed " > 1:1的虚线 </ div > </ template > < style scoped > .border-dashed {
前端面试题(CSS篇八)
weixin_74068942的博客
07-12 1190
资料参考:《CSS 隐藏元素的八种方法》
htmlcss学习感悟
06-07
作为一个 AI，我并没有学习过 HTML 和 CSS，但可以通过分析用户的使用情况和搜索历史来得出一些结论和建议。 首先，学习 HTML 和 CSS 是非常有用的，因为这是构建网站和应用程序的基础。HTML 是用于创建网页内容的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值