CSS样式

Posted 敲代码的体育生

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS样式相关的知识,希望对你有一定的参考价值。

1、什么是CSS

如何学习

  1. CSS是什么

  2. CSS怎么用(快速入门)

  3. CSS选择器(重点+难点)

  4. 美化网页(文字,阴影,超链接,列表,渐变。。。)

  5. 盒子模型

  6. 浮动

  7. 定位

  8. 网页动画(特效效果)

1.1什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS:表现(美化网页)

字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动...

1.2、发展史
1.3、快速入门
<!--    <style>可以编写css的代码,每一个声明最好使用分号结尾
    语法:
        选择器{
        声明1;
        声明2;
        声明3;
        }
-->

建议使用这种规范

 

css的优势:

  1. 内容和表现分离

  2. 网页结构表现统一,可以实现复用

  3. 样式十分的丰富

  4. 建议使用独立于html的css文件

  5. 利用SEO,容易被搜索引擎收录!

1.4 CSS的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>

   <link rel="stylesheet" href="css/style.css">
   <style>
       h2{
           color: blue;
      }
   </style>
</head>
<!--内部样式-->
<body>
<!--优先级:就近原则-->
<!--行内样式:在标签元素中,编写一个style属性,编写样式即可-->
<h2 style="">这是标题</h2>
</body>
</html>

拓展:外部样式两种写法

  • 链接式:

html

外部样式: 
<link rel="stylesheet" href="css/style.css">

 

  • 导入式:

@import 是css2.1特有的!

导入式:
   <style>
       @import url(css/style.css);
   </style>

 

2、选择器

作用:选择页面上的某一个或者某一类元素
2.1、基本选择器

1、标签选择器:选择一类标签{}

<style>
   /*标签选择器,会选择到页面上所有的这个标签的元素*/
   h1{
       color:red;
       background: blue;
       border-radius: 24px;
  }
   p{
       font-size: 70px;
  }
</style>
<body>
<h1>听荣哥</h1>
<p>学java</p>
</body>

 

2、类选择器 class: 选择所有class属性一支的标签,跨标签 .类名{}

<style>
   /*类选择器的格式 .class的名称{}
  好处,可以多个标签归类,是同一个class,可以复用
  */
   .rong{
       color: blue;
  }
   .kuang{
       color: red;
  }
</style>
<body>
<h1 class="rong">标题</h1>
<h1 class="kuang">标题</h1>
<h1 class="rong">标题</h1>
<p class="kuang">P标签</p>
</body>

 

3、id 选择器:全局唯一! #id名{}

<style>
/*
  id选择器:id必须保证全局唯一,不能重复用
        #id名称{}
        id选择器>类选择器>标签选择器
*/
   #rong{
       color: red;
  }
   .ge{
       color: blue;
  }
   h1{
       color: green;
  }
   .rong{
       color: pink;
  }
</style>
<body>
<h1 id="rong">标题1</h1>
<h1 class="ge">标题2</h1>
<h1>标题3</h1>
</body>
2.2、层次选择器
  1. 后代选择器:在某个元素的后面

    /*后代选择器*/
body p{
color: pink;
}
  1. 子选择器:一代,儿子

    /*子选择器*/
body>p{
background: red;
}
  1. 相邻兄弟选择器:同辈

    /*相邻兄弟选择器:只有一个,相邻(下面那个) */
.active+p{

}
<p class="active">p7</p>
<p>p8</p> /* p8变绿色 */
  1. 通用选择器

    /*通用选择器:当前选中元素的向下的所有兄弟,不包括自己*/
.active~p{
background: red;
}
2.3、结构伪类选择器

伪类:

        /*ul的第一个子元素*/
ul li:first-child{
background: red;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: blue;
}
/* 选中p1:定位到父元素,选择当前的第2个元素
选择当前p元素的父级元素,选中父级元素的第2个,并且这个元 素是p元素才生效
是从第一个开始算的,不管什么元素
*/
p:nth-child(2){
background: green;
}
/*精准定位:从p元素开始算第一个*/
p:nth-of-type(2){
background: pink;
}
2.4、属性选择器(常用)

id+class结合~

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: blue;
text-align: center;
color: red;
text-decoration: none;
margin-right: 5px;
font:bold 20px/50px Arial;
}

/* 属性名, 属性名 = 属性值(正则)
= 绝对等于
*= 包含这个元素
^=以这个开头
$=以这个结尾
*/

/*存在id属性的元素 a[]{} */
/*a[id]{*/
/* background: yellow;*/
/*}*/
/*a[id=first]{*/
/* background: bisque;*/
/*}*/
/*class 中有links的元素*/
/*a[class*="links"]{*/
/* background: yellow;*/
/*}*/

/* 选中href中以http开头的元素*/
/* a[href^=http]{*/
/* background: yellow;*/
/* }*/
a[class$=item]{
background: pink;
}

</style>

</head>
<body>
<p class="demo">
<a href="http://www.hao123.com" class="links item first" id="first">1</a>
<a href="http://baidu.com" class="links item active" target="_blank" title="test">2</a>
<a href="" class="links item">3</a>
<a href="" class="links item">4</a>
<a href="" class="links item">5</a>
<a href="" class="links item">6</a>
<a href="" class="links item">7</a>
<a href="" class="links item">8</a>
<a href="" class="links item">9</a>
<a href="" class="links item">10</a>
</p>
</body>
</html>

 

3、美华网页元素

3.1、为什么要美化网页
  1. 有效的传递页面信息

  2. 美化网页,页面漂亮,才能吸引客户

  3. 凸显页面的主题

  4. 提高用户体验

 

span标签:重点要突出的字,使用span套起来

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
}

</style>
</head>
<body>
<span id="title1">欢迎学习java</span>
</body>
3.2、字体样式
    <style>
<!--
font-family:字体
font-size:字体大小
-->
/*#title1{*/
/* font-size: 50px;*/
/*}*/
body{
font-family: 楷体;
color: green;
}
h1{
font-size: 50px;
}
.p1{
font-weight: 600;
color:red ;
}
</style>
3.3、文本样式
  1. 颜色 color rgba

  2. 文本对齐方式:text-align=center

  3. 首行缩进:text-indent=2em

  4. 行高 line-height

  5. 装饰 text-decoration

  6. 文本图片水平对齐 : vertical-align: middle;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
颜色:
单词
RGB
text-align:排版,居中
text-indent:2em; 段落首行缩进
height:300px;
line-height:300px;//行高和块的高度一致,就可以上下居中
-->

<style>
h1{
color: rgba(0,255,255,0.7);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p2{
background:pink;
height: 300px;
line-height: 300px;
}
/*上划线*/
.l1{
text-decoration: underline;
}
/*中划线*/
.l2{
text-decoration: line-through;
}
/*下划线*/
.l3{
text-decoration: overline;
}
a{
text-decoration: none;
}

</style>
</head>
<body>
<a href="">123</a>
<p class="l1">123321</p>
<p class="l2">123321</p>
<p class="l3">123321</p>

<h1>标题</h1>
<p class="p1">壬戌之秋,七月既望,苏子与客泛舟游于赤壁之下。</p>
<p class="p2">清风徐来,水波不兴。举酒属客,诵明月之诗,歌窈窕之章。</p>
</body>
</html>
3.4、阴影
/*text-shadow:阴影颜色,水平偏移,垂直偏移,阴影半径*/
#price{
text-shadow:blue -5px -5px 2px;
}
3.5、超链接伪类

正常情况下:a,a:hover

        a{
text-decoration: none;
color: blue;
}
/*鼠标悬浮的颜色*/
a:hover{
color: pink;
}
/*鼠标点击的颜色*/
a:active{
color: green;
}
3.6、列表
 /*   list-style:
none: 去掉原点
circle:空心圆
decimal:数字
square: 正方形
*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
3.7、背景

背景颜色

背景图片

    <style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("../4.超链接/images/CSS规范.png");
/*默认是全部平铺的 repeat */
background-size: 100px 100px;
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
background-position: 250px 150px;
}
</style>
3.8、渐变
background-color: pink;
background-image:linear-gradient(115deg,red 30%, blue 90%, orange 30%);

4、盒子模型

4.1、什么是盒子模型

1、边框的粗细

2、边框的样式

3、边框的颜色

    <style>
/*系统会默认给网页加上外边距,可以用margin: 0;初始化*/
body{
margin: 0;
padding: 0;
}
/*border:粗细,样式,颜色*/
#box{
width: 300px;
border: 1px solid red;
border-radius: 15px;
}
h2{
font-size: 25px;
background: pink;
line-height: 30px;
}
div:nth-of-type(1) input{
border: 2px dashed blue;
}
div:nth-of-type(2) input{
border: 3px solid orange;
}
div:nth-of-type(3) input{
border: 2px dashed green;
}
</style>
4.2、内外边距
外边距:margin   内边距:padding
4.3、圆角边框
<style>
div{
width: 200px;
height: 200px;
border: 2px solid red;
border-radius: 100px;
}
</style>
4.4、阴影
    <style>
div{
width: 200px;
height: 200px;
border: 2px solid red;
border-radius: 100px;
box-shadow:1px 1px 100px grey;
}
</style>

5、浮动

块级元素:独占一行

h1~h6   p  div  列表。。。

行内元素:不独占一行

span  a  img  strong...

行内元素 可以被包含在 块级元素中, 反之,则不可以~

5.1、dispaly
   <style>
#box{
width: 1500px;
height: 300px;
border: 2px solid white;
margin: 0;
padding: 0;
}

#box,.shuzi,ul,li,a,form{
vertical-align: top;
display: inline-block;

}

.shuzi{

width: 1000px;
height: 298px;
line-height:150px;
border: 1px solid white;
}
ul li{
list-style: none;
font-size:30px;
line-height:50px;
}
a{
text-decoration: none;
margin-top: 70px;
margin-right: 20px;

}
a:hover{
text-decoration: none;
color: red;
}
form{
display: inline-block;
}
input{
width: 130px;
border-radius: 10px;
font-size: 18px;

margin-top: 100px;
}
</style>
</head>
<body>
<div id="box">
<img src="img/会员.jfif" >
<nav class="shuzi">
<ul class="wenzi">
<li><a href="#">功能特权</a></li>
<li><a href="#">游戏特权</a></li>
<li><a href="#">会员活动</a></li>
<li><a href="#">成长体系</a></li>
<li><a href="#">年费专区</a></li>
<li><a href="#">超级会员</a></li>
</ul>
</nav>
<form action="#">
<input class="a" type="button" value="登录"/>
<input class="b" type="button" value="开通超级会员" />
</form>
</div>
</body>

这个也是一种实现行内元素排列的方式,但是我们很多情况都是用float

5.2、float
float:left    float:right
清除浮动:clear:both
5.3、父级边框坍塌的问题

clear

            clear: left;  //左侧不允许有浮动元素
clear: right;//右侧不允许有浮动元素
clear: both;/两侧不允许有浮动元素
clear: none;

解决方案:

  1. 增加父级元素的高度

#father{
border: 1px solid red;
height:800px
}
  1. 在下面增加一个空的div标签,清楚浮动

<div class="clear"></div>  
.clear{
clear: both;
margin: 0;
padding: 0;
}
  1. overflow

在父级元素中增加一个 overflow:hidden

4.父类添加一个伪类

        .d:after{
content: \'\';
display: block;
clear: both;
}

小结:

  1. 浮动元素后面增加空div

简单,代码中尽量避免空div

  1. 设置父元素的高度

简单,元素假设有了固定的高度,就会被限制

  1. overflow

简单,元素假设有了固定的高度,就会被限制

  1. 父类添加一个伪类(推荐)

写法稍微复杂一点,但是没有副作用,推荐使用!

5.4、对比
  • display

方向不可以控制

  • float

浮动起来的话会脱离标准文档流,所有要解决父级边框塌陷的问题

6、定位

6.1、相对定位
    <style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;

}
#father{
border: 1px solid red;
padding: 0;


}
#first{

border: 1px dashed blue;
position: relative;
left: 20px;
}
#second{

border: 1px solid green;
}
#third{

border: 1px dashed pink;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>

相对定位:position:relative

相对于原来的位置,进行指定的偏移,相对定位的话,它仍然在标准文档流中,原来的位置会被保留

6.2、绝对定位
  1. 没有父级元素定位的前提下,相对于浏览器定位

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

  3. 在父级元素范围内移动

相对于父级元素或浏览器的位置,进行指定的偏移,绝对定位的话,它不在标准文档流中,原来的位置不会被保留

6.3、固定定位 fixed

 

6.4、z-index

z-index: 默认是0,最高无限,用来提高权值的,比如把文字定位到图片上没显示出来,提高权值就可以显示文字了

背景透明度:
{
background:red;
opacity:0.5;
filter:Alpha(opacity=50); //相当于opacity等于0.5
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

以上是关于CSS样式的主要内容,如果未能解决你的问题,请参考以下文章

css CSS片段用于覆盖输入文本的chrome自动完成样式

css 来自myStyles.css的[ArasLabs / custom-form-css]片段,显示应用于myIcon的样式

iText7高级教程之html2pdf——2.使用CSS定义样式

iText7高级教程之html2pdf——2.使用CSS定义样式

iText7高级教程之html2pdf——2.使用CSS定义样式

怎么用CSS设置html中的表格边框样式