Как я могу изменить несколько картинок в css?

261
16 марта 2018, 12:10

У меня уже есть одна картинка (в шапке) и я хочу настроить еще вторую и т.д. Как я могу её прописать?

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>learningenglish.com</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="keywords" content="learningenglish, learning english, "/>
    <link rel="stylesheet" type="text/css" href="homepagefan.css"/>
    <link href="img/learningenglish" rel="shorcuticon" type="image/x-icon" />
</head>
<body>
<header>
    <a href="englishfan.html" title="Homepage"><img src="img/head1.jpg" alt="LearningEnglish" title="Homepage" /></a>
</header>
<aside>
    <div id="menuhrefs"></div><pre><a href="presentsimple.html"> Present simple</a>
    <hr /><a href="pastsimple.html"> Past simple</a>
    <hr /><a href="presentcontinuous.html"> Present continuous</a>
    <hr /><a href="pastcontinuous.html"> Past continuous</a>
    <hr /><a href="presentperfect.html"> Present perfect</a>
    <hr /><a href="pastperfect.html"> Past perfect</a>
    <hr /><a href="presentperfectcontinuous.html"> Present perfect continuous</a>
    <hr /><a href="cancould.html"> Can, could</a>
    <hr /><a href="willwould.html"> Will, would</a>
    <hr /><a href="reading.html"> Reading</a></pre>
</aside>
<div id="rulesprscenter">
    The <span class="colortext">present simple</span> in English is used to describe an action that is regular, true or normal.
    <img src="img/present.png" />
</div>
<footer>
    <div class="wrapper">Privacy policy &copy; 2018</div>
</footer>
</body>
</html>
@Charset "UTF-8"; 
* {   
    margin: 0;
    outline: none; 
} 
body, html {height: 100%}
body { 
    width: 100%; 
    height: 100%; 
    background-color: #FAEEDD; 
    color: black;
    font-size: 1em;
    font-family: comic sans ms, sans-serif; 
} 
a {
    text-decoration: none;
    color: black;
}

img {
    width: 100%;
    width: auto/9;
}
@media (max-width: 2732px){
img {
    width: 100%;
    width: auto/9;
}}
.left {float: left};
header { 
    width: 98%; 
    min-height: 50px; 
    position: absolute;
} 
aside {
    width: 330px;
    height:500px;
    max-width: 100%;
    border: 3px solid grey;
    font-size: 20px;
    background-color: white;
    padding-top: 10px;
    font-weight: bold;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 35px;
    margin-top: -5px;
}

hr {
    display: block;
    border: 0;
    height: 1px;
    border-top: 2px solid grey;
    padding: 0;
}
center {
    width: 1005px;
    height: 500px;
    max-width: 100%;
    border: 2px dashed grey;
    background-color: #FAEEDD;
    font-size: 30px;
    font-weight: bold;
    position: absolute; top: 260px; left: 500px; 
}
#center1 {
    width: 1005px;
    height: 500px;
    max-width: 100%;
    border: 0px solid grey;
    background-color: #FAEEDD;
    font-size: 30px;
    font-weight: bold;
    position: absolute; top: 260px; left: 500px; 
}
#rulesprscenter {
    width: 1005px;
    height: 500px;
    max-width: 100%;
    border: 0px solid grey;
    background-color: #FAEEDD;
    font-size: 30px;
    font-weight: bold;
    position: absolute; top: 270px; left: 500px;
}

#centertest {
    width: 1005px;
    height: 500px;
    max-width: 100%;
    border: 0px solid grey;
    background-color: #FAEEDD;
    font-size: 30px;
    font-weight: bold;
    position: absolute; top: 260px; left: 690px; 
}
.colortext {color: red}
/* стили для футера*/
footer { 
border-top: 2px solid grey; 
margin-top: 1000px; 
padding: 1%; 
background-color: white; 
font-weight: bold; 
}
Answer 1

Сначала присваиваешь каждой картинке id, потом в css обращаешься к ней по её id и пишешь для неё стили. 

<img id="head1" src="img/head1.jpg" alt="LearningEnglish" title="Homepage" /> 
 
#head1{ 
position: absolute; 
top: 100px; 
left: 70px; 
}

READ ALSO
Наклонить блок без наклона содержимого
CSS

Наклонить блок без наклона содержимого

У меня есть div, в котором находится картинкаКак сделать так, чтобы при наклоне с помощью свойства transform: skewX() картинка оставалась ровной, т

 186
Вёрстка блока с 2-мя треугольниками
CSS

Вёрстка блока с 2-мя треугольниками

Доброго времени суток! Помогите разобраться, каким образом с помощью css можно сверстать данный блок, что бы избежать вставки картинокПоробывалось...

 187
Переносится на новую строку [требует правки]
CSS

Переносится на новую строку [требует правки]

Здравствуйте, при просмотре сайта с мобустройств тык

 212
Событие &#39;touchend&#39; не работает в Safari на ios
CSS

Событие 'touchend' не работает в Safari на ios

Я имею два блока с высотой 100vh - это header и выплывающее менюmenu

 188