CSS

最新推荐文章于 2024-01-15 00:00:00 发布

用户不存在_

最新推荐文章于 2024-01-15 00:00:00 发布

阅读量133

点赞数

本文链接：https://blog.csdn.net/m0_49902448/article/details/114988943

版权

[什么是CSS]

Casccading Style Sheet 层叠级联样式表

[我的第一个css程序]

合并

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范<style>可以编写css的代码-->
<style>
  h1{
      color: red;
  }
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

分开, 分别写到html和css

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
    /*与css连接*/
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

h1{
 color: red;
}

[css的3种导入方式]

内部样式, 在title下插入style

<style>
     h1{
         color: green;
     }
 </style>

行内样式, 在标签元素中, 编写一个一个style属性, 编写样式即可

<h1 style="color: red">我是标题</h1>

外部样式(还有一个导入式, 在此不推荐, 所以就不总结了)

在外部样式style.css编写样式

<link rel="stylesheet" href="css/style.css">

[基本选择器]

标签选择器

h1{
	...
}
p{
	...
}

<h1>学java</h1>
<p>学python</p>

类选择器

.aaa{
	...
}
.bbb{
	...
}

<h1 class="aaa">标题一</h1>
<h1 class="bbb">标题二</h1>
<h1 class="bbb">标题三</h1>

id选择器

#aaa{
color: #c91970;
}
#bbb{
color: royalblue;
}

<h1 id="aaa">标题1</h1>
<h1 id="bbb" class="ccc">标题2</h1>

总结: id选择器>class选择器>标签选择器

[层次选择器]

后代选择器

body p{
    background: red;
}

所有p标签均变成红色

<p>p1</p>
<p>p2</p>
<p>p3</p>

<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>

子选择器

body>p{
    background: red;
}

儿子那一代变成红色, p1, p2, p3

<!--儿子-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<!--孙子-->
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>

相邻选择器

.active + p{
    background: red;
}

相邻的下一个相同的类型, 例如例子的p2变红色, 如果中间插入普通文本, 依然变红色, 如果插入h1标题啥的, 就被隔断了, 就选择不到了

<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>

通用选择器

.active~p{
    background: red;
}

同级的下面的所有变红色, 如p2 p3 p8, p7不是同级不变色, p0 p1不变色

<p>p0</p>
<p class="active">p1</p>
<h1>哈哈哈</h1>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
    <p>p7</p>
</ul>
<p>p8</p>

[伪类选择器]

常用伪类选择器

/*ul的第一个元素*/
ul li:first-child{
    background: darkred;
}
/*ul的最后一个元素*/
ul li:last-child{
    background: cadetblue;
}

li1和li3变色, 如果有很多的ul, 则每个ul里的第一个和最后一个都会被选种

<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>

拓展, 这个比较麻烦

/*选中p1: 定位到父元素, 选择当前的第一个元素
选择当前p元素的父级元素, 选中父级元素的第一个
并且是当前元素才生效
*/
p:nth-child(1){
background: green;
}
/*选中父元素下的p元素的第二个*/
p:nth-of-type(2){
background: yellow;
}

[属性选择器]

= 绝对等于

a[id=first]{
    background: green;
}

*= 包含这个元素

a[class*="links"]{
    background: yellow;
}

^= 以这个开头

a[href^=http]{
    background: blue;
}

$= 以这个结尾

a[href$=pdf]{
    background: cadetblue;
}

html例子

<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="text">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a class="links item last">10</a>
</p>

[补充]

span标签

<span id="title1">java</span>

[字体样式]

字体font-family

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。

body{
    font-family: "Arial Black", 宋体;
}

font-size设置或检索对象中的字体尺寸。

h1{
    font-size: 50px;
}

加粗font-weight

.p1{
    font-weight: bold;
}

颜色color

h1{
    color: darkred;
}

[文本样式]

排版text-align

text-align 属性规定元素中的文本的水平对齐方式。

h1{
	text-align: center;
}

首行缩进text-indent

.p1{
    text-indent: 2em;
}

行高line-height

行高和块的高度一致就可以居中

.p3{
    background: darkgray;
    height: 300px;
    /*行高*/
    line-height: 100px;
}

划线text-decoration

下划线underline, 中划线line-through, 上划线overline

a超链接标签默认下划线, 去下划线text-decoration: none

.p2{
    text-decoration: underline;
}

水平对齐vertical-align

vertical-align这个是设置元素的垂直排列的, 用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐.

img,span{
    vertical-align: middle;
}

<img src="../../resources/image/1.jpg" alt="好基友">
<spam>好基友一起走</spam>

列表样式list-style

none去掉序号, circle空心圆, decimal数字, square正方形

ul li{
 list-style: none;
}

[超链接伪类]

本来

a{
text-decoration: none;/*去下划线*/
color: black;
}

鼠标悬停hover

a:hover{
color: brown;
}

鼠标按住未释放active

a:active{
color: green;
font-size: 30px;
}

阴影text-shadow

#price{
text-shadow: blueviolet 1px 1px 10px ;
}

样例html

<a href="">
 <img src="images/hxd.jpg" alt="">
</a>
<p>
 <a href="#">售卖: 我的好兄弟</a>
</p>
<p>
 <a href="">卖者: 一名好基友</a>
</p>
<p id="price">
 $99
</p>

[花里胡哨]

平铺方式background-repeat

div{
 width: 1000px;
 height: 700px;
 border: 1px solid red;/*边框*/
 background-image: url("images/1.jpg");
 /*默认是全部平铺的*/
}
.div1{
 background-repeat: repeat-x;/*水平平铺*/
}
.div2{
 background-repeat: repeat-y;/*垂直*/
}
.div3{
 background-repeat: no-repeat;/*一个不平铺*/
}

渐变linear-gradient

建议去一个网站直接调渐变, 直接复制码

 body{
     background: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
 }

[盒子模型]

外边距margin
内边距padding

/*常见操作*/
h1,ul,li,a,body{
margin: 0;/*外边距离*/
padding: 0;/*内边距*/
text-decoration: none;/*下划线*/
}

边框border

#app{
width: 300px;/*宽度*/
border: 1px solid red;/*solid实线*/
}
/*div下第一个框里的input*/
div:nth-of-type(1) input{
    border: 3px dashed black;/*虚线dashed*/
}

圆角边框border-radius

1个值是4个角, 2个值是(左上右下)和(右上左下), 4个值是(左上)依次顺时针

圆圈: 圆角=宽度/2

div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 50px 20px;
}

阴影shadow

div{
width: 100px;
height: 100px;
border: 1px solid yellow;
border-radius: 50px;
/*阴影阴影阴影阴影阴影阴影阴影阴影*/
box-shadow: 10px 10px 50px yellow;
}

浮动display

display: inline-block

block块元素 inline行内元素

folat: right

clear: right 右侧不允许有浮动元素

clear: left 左侧不允许有浮动元素

clear: both 两侧不允许有浮动元素

clear: none

[定位]

相对定位relative

position: relative;
top: -20px;
left: 20px;
bottom: -20px;
right: 20px;

绝对定位absolute

没有分级元素定位的前提下, 相对于浏览器定位

假设父级元素存在定位, 我们通常会相对于父级元素进行偏移

在父级元素范围内移动

position: absolute;
right: 30px;
top: -10px;

固定定位fixed

position: fixed;

层级高度z-index

.tipText{
     /*层级高度*/
     z-index: 999;
}

定位好难…

一个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;/*下划线*/
            background: #a461e2;
            /*用于对网页文字及其他元素设置行高，由于会影响元素高度，也可用于调节一些元素的高度。*/
            line-height: 100px;
            /*text-align作为HTML元素属性其主要是用来文本水平居中的。*/
            text-align: center;
            color: white;
            /*块元素*/
            display: block;
        }
        /*选择鼠标指针浮动在其上的元素，并设置其样式：*/
        a:hover{
            background: #0093E9;
        }
        .a2, .a4{
            /*定位语句*/
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            position: relative;
            left: 100px;
            top: -300px;
        }
        .
    </style>
</head>
<body>

<div id="box">
    <a class="a1" href="#">链接1</a>
    <a class="a2" href="#">链接2</a>
    <a class="a3" href="#">链接3</a>
    <a class="a4" href="#">链接4</a>
    <a class="a5" href="#">链接5</a>
</div>
</body>
</html>

在这里插入图片描述

用户不存在_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

[什么是CSS]Casccading Style Sheet 层叠级联样式表[我的第一个css程序]合并<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style> h1{ color: red
复制链接

扫一扫