码迷,mamicode.com
首页 > Web开发 > 详细

CSS

时间:2018-09-01 20:34:57      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:元素   color   back   :focus   let   info   输入   链接   属性   

一.CSS选择器

1.CSS语法

h1(选择器找标签) {color:red;font_size:14px;}

2.CSS  style的导入方式

(1)直接将样式写在标签内部的style属性

<div style="color: yellow">我是div标签</div>

(2)在head标签中写style标签

<head>
<style>
p{
color: red;
}
</style>
</head>

<body>
<p>我是p标签</p>
<script></script>
</body>

(3)将样式写在单独的CSS文件中,通过link标签的href属性导入(主要项目中多用)

html文件:

<head>
<link rel="stylesheet" href="css href属性.css">
</head>
<body>
<span>我是span标签</span>
</body>

css文件:

span{
color: aqua;
}

3.CSS选择器

(1)基本选择器

①元素选择器: p

例如:是将所有的p标签全部改成一个颜色

<head>
<style>
p{
color: lawngreen;
}
</style>
</head>
<body>
<p>我是p标签1</p>
<p>我是p标签2</p>
<p>我是P标签3</p>
<p>我是P标签4</p>
<p>我是p标签5</p>
</body>

②ID选择器: #i1

例如:是将所有的id值为i1的标签全部变成一个颜色

<head>
<style>
#i1{
color: red;
}
</style>
</head>
<body>
<div id="i1">我是div标签1</div>
<div id="i1">我是div标签2</div>
<div id="i1">我是div标签3</div>
<div>我是div标签4</div>
<div>我是div标签5</div>
</body>

③类选择器: ".c1"   class类中用空格隔开/查看整个文档中的cls的值是不是那个值,如果是就改变颜色

例如:是将所有的class为c1的颜色全部变成一个颜色

<head>
<style>
.c1{
color: red;
}
</style>
</head>
<body>
<p class="c1">我是p标签1</p>
<p>我是p标签2</p>
<div class="c1">我是div标签1</div>
<div>我是div标签2</div>
</body>

(2)组合选择器

①后代选择器

例如:div里面所有的span标签的颜色变成一个颜色

<head>
<style>
div span {
color:red;
}
</style>
</head>
<body>
<div>
<div>
<span>我是span标签1</span>
<p>
<span>我是span标签2</span>
</p>
</div>
</div>
</body>

②儿子选择器

例如:选择所有父级是div元素的span元素(标签)

<head>
<style>
div>span
{
color: lawngreen;
}
</style>
</head>
<body>
<div>
<div>
<span>我是span标签1</span>
<p>我是p标签</p>
</div>
<span>我是span标签2</span>
</div>
</body>

③毗邻选择器

例如:选择所有紧接着div元素之后的p元素,并改变样式

<head>
<style>
div+p{
color: yellow;
}
</style>
</head>
<body>
<div>
<div>我是div标签1</div>
<p>我是p标签1</p>
</div>
<p>我是p标签2</p>
</body>

④弟弟选择器

例如:是将p标签下面的所有兄弟span标签找到并改变样式

<head>
<style>
p~span{
color: aqua;
}
</style>
</head>
<body>
<p>这是p标签1</p>
<span>这是span标签1</span>
<span>这是span标签2</span>
<div>这是div标签</div>
<span>这是span标签3</span>
</body>

(3)属性选择器

例如1:光找有s14这个属性的元素,并为其改变颜色

<head>
<style>
[s14]{
color: yellow;
}
</style>
</head>
<body>
<div s14="123">这是div标签1</div>
<div>这是div标签2</div>
<p s14="456">这是p标签</p>
</body>

例如2:找div元素下有s14属性的,并改变样式

<head>
<style>
div[s14]{
color: yellow;
}
</style>
</head>
<body>
<div s14="123">这是div标签1</div>
<div>这是div标签2</div>
<p s14="456">这是p标签</p>
</body>

(4)分组选择器

例如:找到父级是div元素的p标签和所有紧接着div标签的p标签的元素,并改变样式

<head>
<style>
div+p,div>p{
color: red;
}
</style>
</head>
<body>
<div>我是div标签</div>
<p>我是p标签1</p>
<div>
<p>我是p标签2</p>
</div>
</body>

(5)嵌套选择器

例如:找d1后代中有类是c1样式的span的标签,并改变样式

<head>
<style>
#d1 span.c1{
color: red;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<span>这是span1</span>
<p>
<span class = "c1">这是span2</span>
</p>
</div>
</div>
</body>

(6)伪类选择器

①未访问的链接(设置没有访问过网址的颜色)

<head>
<style>
a:link{
color:red;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.luffycity.com">路飞学城</a>
<a href="https://www.taobao.com">淘宝</a>
</body>

②已访问的链接(设置已经访问过网址的颜色)

<head>
<style>
a:visited{
color: yellow;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.luffycity.com">路飞学城</a>
<a href="https://www.taobao.com">淘宝</a>
</body>

③鼠标移动到链接上的颜色    (常用)

<head>
<style>
a:hover{
color: red;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.luffycity.com">路飞学城</a>
<a href="https://www.taobao.com">淘宝</a>
</body>

④选定的链接(鼠标点住网址的那一时刻的时间的颜色)

<head>
<style>
a:active{
color: blue;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.luffycity.com">路飞学城</a>
<a href="https://www.taobao.com">淘宝</a>
</body>

⑤input输入框获取焦点的样式

<head>
<style>
input:focus{
outline: none;
background-color: yellow;
}
</style>
</head>
<body>
<label for="i1">用户名:</label>
<input id="i1" type="text">
</body>

(7)伪元素选择器   (before和after多用于清除浮动)

①first-letter 常用的给首字母设置特殊样式

<head>
<style>
p:first-letter{
font-size: 48px; (字体大小)
color:red (字体颜色)
}
</style>
</head>
<body>
<p>我是一个p标签</p>
</body>

②before 在标签之前插入内容

<head>
<style>
p:before{
content:"*"; (添加的内容)
color: darkred; (添加内容的字体颜色)
}
</style>
</head>
<body>
<p>我是一个p标签</p>
</body>

③after 在标签之后插入内容

<head>
<style>
p:after{
content:"*"; (添加的内容)
color: red; (添加内容的字体颜色)
}
</style>
</head>
<body>
<p>我是一个p标签</p>
</body>

4.CSS选择器的优先级

(1)选择器相同   (最下面的会生效,中间存在覆盖的问题)

<head>
<style>
p{
color: red;
}
p{
color: blue;
}
</style>
</head>
<body>
<p>我是p标签1</p>
<p>我是p标签2</p> ====>展现出来的是蓝色
</body>

(2)选择器不同 (不同的选择器优先级不一样)

技术分享图片

例子一:打印出来的结果是黄色的(因为内联样式大于id选择大于类选择器大于元素选择器)

html文件:

<head>
<link rel="stylesheet" href="css.css">
<style>
#d1{
color: red;
}
</style>
</head>
<body>
<div class="c1" id="d1" style="color: yellow">这是div标签1</div>
</body>

 css文件:

.c1{
color: blue;
}

例子二:嵌套 (打印出来的结果:这是div标签是黄色,div里面的p标签是红色)

<head>
<link rel="stylesheet" href="css.css">
<style>
div{
color: red;
}
</style>
</head>
<body>
<div class="c1" id="d1" style="color: yellow">这是div标签1</div>
<div>
<p>div里面的p</p>
</div>
</body>

 强制生效:  (在特殊情况之下才使用,但是尽量不要使用)

p{
color:blueviolet !important;
}

 5.css的属性相关

 (1)宽和高 

不是任何标签都可以设置宽和高,只有块级标签才可以设置,内联标签的宽度是由内容决定的

width属性可以为元素设置宽度

height属性可以为元素设置高度

例如:

<head>
<style>
div{
width: 200px; (宽度)
height: 200px; (高度)
background-color: red; (背景颜色)
}
</style>
</head>
<body>
<div>我是div标签1</div>
<div>我是div标签2</div>
</body>

 

技术分享图片

(2)字体属性

 ①文字字体(放指定用的字体)  可以放入多个字体,如果第一个浏览器不支持,就会尝试第二个

<head>
<style>
body{
font-family: "Microsoft YaHei", "微软雅黑", sans-serif
}
</style>
</head>
<body>
<p>这是p标签1</p>
<p>这是p标签2</p>
<p>这是p标签3</p>
<p>这是p标签4</p>
<p>这是p标签5</p>
</body>

 ②字体大小 

例子:

<head>
<style>
body{
font-size: 34px; (如果设置成inherit表示继承父元素的字体大小值)
}
</style>
</head>
<body>
<p>这是p标签</p>
</body>

③字体的粗细

技术分享图片

④文本颜色

技术分享图片

(3)文字属性

 ①文字对齐

 技术分享图片

②文字装饰

 技术分享图片

③首行缩进

技术分享图片

(4)背景属性

 

CSS

标签:元素   color   back   :focus   let   info   输入   链接   属性   

原文地址:https://www.cnblogs.com/lhy979/p/9571171.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!