style(样式属性关键字) 可以设置所有参数标签样式
";"里面可以配置多个属性配置一个就用分号隔开
可以在网上查找Css样式属性大全
用背景颜色举例：style 可以写在p标记中来选择样式有3种选择方式
1：直接写在标签之中
<p style="background: #FF0000;">
嘻嘻哈哈
<p/>
</body>2.写在当前在当前Html(只在当前Html文件中生效)
但是标签声明必须在Head（头） 和body（主体）中间
<P>
background: #FF0000;
<p/>
<style>3.创建一个css文件在当中说明样式
在Html中引用样式即可
/* href：css文本样式地址 */
p{
background: red;
}选择器(我们用div举例，这都是在style样式属性中设置的,很多详情到网站查下资料)
注意事项：如果你div种配置字体 你又用p段落配置了字体 那么当你在div中用p段落就会发生冲突替换
第一种 .div 说明此div是class引用 .div{
background: blue;
width: 200px;
height: 300px;
font-size: 15px;
color: #FF0000;
}
</style>
<body>
<div class="div">
<p>
我老了
</p>
</div>
</body>
第二种id选择器 #(你设置的参数，谁要用可以直接拿过去引用) #test{
background: blue;
width: 200px;
height: 300px;
font-size: 15px;
color: #FF0000;
}
</style>
<body>
<div id="test">
<p>
我老了
</p>
</div>
</body>第三种*将所有样式都替换成此
用在字体修改，或者有某项需求需要统一修改的需求 *{
font-size: 15px;
color: #FF0000;
}
</style>
<body>
<div id="test">
<p>
我老了
</p>
</div>
</body>第五种 选择你的需求例如P，然后调试参数样式进行呈现
第六种 父子标签（如果div下有P就用这个样式）
div,p{
background: blue;
width: 200px;
height: 300px;
font-size: 15px;
color: #FF0000;
}
</style>
<body>
<div>
<p>
我老了
</p>
</div>
</body> 属性选择样式：方式有两种1、引用性引用html属性例如title 还有一种就是自定义属性 [date-xixi]
*[date-xixi]{
background: blue;
width: 200px;
height: 300px;
font-size: 15px;
color: #FF0000;
}
</style>
<body>
<div date-xixi>
<p>
我老了
</p>
</div>
</body>第六种属性上对应值属性上有什么值，根据值对应相应的样式
[data-xixi="abc"]{
background-color: #0000FF;
width: 30%;
height:50%;
font-size: 15px;
color: #FF0000;
}
</style>
<!-- <link rel="stylesheet" type="text/css" href="../css/new_file.css"/> -->
<body >
<div data-xixi="abc">
<p>
嘻嘻哈哈
</p>
</div>
</body>超级链接状态(可以通过style样式来调整显示时的样子)
a:link 从来没有被访问过的显示
a:visited 被访问过的超级链接显示
a:hover 鼠标碰上去的时候 显示
a:active 鼠标按下来的时候 显示 color: red;
font-size: 16px;
}
a:visited{
color: aqua;
font-size: 16px;
}
a:hover{
color: brown;
font-size: 20px;
}
a:active{
color: black;
font-size: 18px;
}
</style>当然也可以通过div来进行分层 那些需要这种样式的超级链接那些是不需要的
#xuan a:link{
color: red;
font-size: 16px;
}
#xuan a:visited{
color: aqua;
font-size: 16px;
}
#xuan a:hover{
color: brown;
font-size: 20px;
}
#xuan a:active{
color: black;
font-size: 18px;
}
</style>
<body>
<div id="xuan">
<a href="https://www.hao123.com/">我测试下</a>
</div>
<div >
<a href="https://www.hao123.com/">我测试下2</a>
</div>
</body>焦点样式
/* 输入焦点样式 */
/* 用[type=text] 可以选择需要输入类型,我这里选择的是text */
input:focus{
/* 背景颜色样式 */
background: #00FFFF;
/* 字体颜色样式 */
color: #FF0000;
}
</style>
<body>
<!-- 输入选择他会将焦点隐射进来 -->
<input type="text" />
</body>边框样式
border：
尺寸 5px border:px
线条样式 border：5px sonlid （这里是那实线边框线举例，边框线可以根据自己选择调节）
solid 实线
none 无边框线
double 双线
dashed 虚线
...... 很多网上查阅资料 用的时候查询 img{
/* 边框大小及边框线条 */
border: 5px solid ;
/* 边框颜色 */
border-color: #00FFFF;
}
</style>
<body>
<!-- src照片地址引用，width宽，height高 -->
<img src="../img/7e3588d32981afd389612eeedda14181.jpg"
width="200px" height="200px" />
</body> 上下左右边框调节
/* 上边框线 */
border-top: 5px solid ;
/* 下边框线 */
border-bottom:5px double ;
/* 右边框线 */
border-right: 5px dashed;
/* 左边框线 */
border-left: 5px dashed;
border-color: #00FFFF;
}所有带边框的都可以用border 来进行调节：举例文本边框
border: 1px solid;
border-color: blue;
height: 30px;
width: 250px;
}
边框弧度调节及阴影调节:举例
img{
border-radius:50%;
/* 参数第一个 x,y,模糊度，阴影颜色 */
box-shadow: 0px 0px 20px black;
}
input[type=text]{
/* 调节边框线条永远是border来调节 */
border: 1px solid;
/* 左上边框 弧度调节*/
border-top-left-radius:15px;
/* 右下边框 弧度调节*/
border-bottom-right-radius: 15px ;
}
</style>
<img src="../img/7e3588d32981afd389612eeedda14181.jpg"
width="200px" height="200px" />
<body>
<input type="text" />
</body>如果是字体相应配置就在font关键字下
如果是文本相应配置就在text关键字下
如果是2D照片相应配置就在transform关键字下
很多记是记不完的网上查找Css3大全
在style中自定义字体
/自定义字体/
/要用的话引用用:font-family: myFirstFont; /
font-family: myFirstFont;
src: url('font/maoze.ttf') format('embedded-opentype');
}
字体定义举例，及照片调节举例
p{
font-family: myFirstFont;
/*粗体字设置方式*/
font-weight: bold;
font-size:30PX;
/*字体阴影部分*/
text-shadow: 0px 0px 5px red;
}
img{
/* transform 2D调节*/
transform:rotate(30deg);
width: 300px;
height: 300px;
}过度关键字：transition
字体过度
/* 过度 */
p{
/* 初始背景颜色 */
background: white;
/* 过度的是颜色 5秒钟过度 */
transition:border-bottom-color 5s;
}
/* 鼠标移动上去的时候 */
p:hover{
/* 当鼠标移动上去时将背景颜色改为红色 */
background-color: #FF0000;
}
</style>
图片过度
img{
/* transform 2D调节*/
transform:rotate(0deg);
transform: scale(1);
width: 100px;
height: 100px;
}
img:hover{
transition: background-image 5s;
transform: scale(1.5);
}div漂浮
#div1{
/* 图层 数字越大图层越前 */
z-index: 1;
/* 漂浮设置 */
position: absolute;
/* 相当于x */
left: 0;
/* 相当于y */
top: 0;
width: 100px;
height: 100px;
background: rgba(225,0,0,0.3);
}
</style>margin 间距（里面可以调整上下左右间距）
top 上 left左 bottom 下 right右
网页贴不了网页边缘的话需要用调整body间距
margin:0px；/*这里的话可以自己选择*/
}
列表变菜单
- 数据收集方式好
body {
/* 间距 */
margin: 0px;
padding: 0px;
}
ul {
margin: 0px;
list-style-type: none;
}
ul li {
/* 漂浮 */
float: left;
background-color: yellow;
width: 130px;
height: 40px;
text-align: center;
line-height: 40px;
}
ul li:hover {
/*鼠标触碰显示*/
background-color: aliceblue;
}
</style>
<body>
<nav>
<ul>
<li>
<a href="">首页</a>
</li>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">下载</a>
</li>
<li>
<a href="">联系我们</a>
</li>
</ul>
</nav>
</body>