Zależność między CSS a <head> w HTML

0

Hej ciężko mi było wymyślić nazwę tematu, a proszę tylko o wytłumaczenie tytułowej zależności, której nie rozumiem.

Pracując nad okienkiem logowania chciałem pozbyć się białego tła z pola <input type="text">, mam podłączony pod HTML'a arkusz CSS, w którym wy pozycjonowałem wszystkie elementy strony, zdziwił mnie fakt, że nie mogę w CSS, ani nawet w sekcji <body> dla inputa ustawić wartości, które dały by zamierzony efekt, odnośnie wyglądu pola tekstowego, aż w końcu udało mi się za pomocą linijek:

<style type="text/css">
        input[type="text"]{
            background-color:  transparent;
            border: transparent;
            font-family: Verdana,sans-serif;
            font-style: italic;
            text-align: center;  }

        input[type="password"]{
            background-color:  transparent;
            border: transparent;
            font-family: Verdana,sans-serif;
            font-style: italic;
            text-align: center; }
        </style>

w sekcji <head> mojego pliku HTML. Bardzo proszę, mógłby mi ktoś jasno wytłumaczyć, czemu nie mogłem ustawić tych samych wartości stricte w pliku CSS, tylko musiałem bawić się w pliku HTML? Oraz czemu dzieje się tak, że kiedy w w.w linijkach wpisuję chociażby

background-color:  transparent;

To dopiero wtedy, gdy jednocześnie w CSS nadam innputowi wartość background: Yellow, to zaciąga kolor z CSS, a nie z pliku html? Kiedy jednak usunę linijkę background z HTML, a zostawię w CSS to w ogóle nie zaciąga tych danych z CSS? Jakie w takim razie jest przeznaczenie arkusza stylów, skoro część stylu danego elementu, muszę ustawiać w pliku HTML?

Bardzo bym prosił przy okazji, o informacje jak pozbyć się tej niebieskiej obramówki, w okół pola tekstowego mojego inputa? Pojawia się ona dopiero po kliknięciu w pole tekstowe, a chciałbym, żeby nie podświetlało się nic. Link

0

ciężko wróżyć z fusów bez kodu strony, może błędnie dodawałeś klasę przy inputach czy divach

0

Bardzo bym prosił przy okazji, o informacje jak pozbyć się tej niebieskiej obramówki, w okół pola tekstowego mojego inputa? Pojawia się ona dopiero po kliknięciu w pole tekstowe, a chciałbym, żeby nie podświetlało się nic.

Tak ciężko w necie poszukać ;) Pierwszy link ze stacka:
https://stackoverflow.com/questions/3397113/how-to-remove-border-outline-around-text-input-boxes-chrome

Dla leniwych:

input:focus, input:focus{
    outline: none;
}

Ogólnie w Twoim temacie to musisz nauczyć się korzystać z narzędzi WebTools w przeglądarkach (np. Firebug). Tam możesz podejrzeć wszystkie zaczytywane style dla danego elementu i po drodze zobaczyć czemu nie są zaczytywane poprawnie (np. złe odwołanie czy styl nadrzędny, który nadpisuje Twoje właściwości).

PS: Looknij sobie: W każdej przeglądarce masz takie coś, zazwyczaj wywołuje się poprzez F12 i mniej więcej działa na takiej samej zasadzie. Różni się tylko interfejsem.

0

To jest kod strony, w stanie, w którym nie działa komenda "background-color: transparent"

<!DOCTYPE html>
<html lang="en">
<head>

    <link rel="stylesheet" href="Stylesheet.css" type="text/css"/>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
<div class="Welcome"><h1>Welcome to user panel</h1></div>

<div class="LogPanel">
    <img src="img/LogPane.png">

</div>
<div class="LogInput">
    <input type="text" placeholder="Imię i nazwisko">


</div>
<div class="LogInputPanel">
    <img src="img/input.png">
</div>
<div class="PassInput">

    <input type="password" placeholder="Hasło">
</div>
<div class="PassInputPanel">
    <img src="img/input.png">
</div>






</body>

</html>

body{
    background-image: url("img/tlo_logowania.jpg");
}
.Welcome {
    width: 100%;
    background-image: url("img/top.png");
    text-align: center;
    

}

.LogPanel{
    background-color:  transparent;
    border: transparent;
    font-family: Verdana,sans-serif;
    font-style: italic;
    text-align: center;
    outline: none;
    position: fixed;
    width: 543px;
    height: 275px;
    margin-left: 600px;
    
}
.LogInput{
 background-color:  transparent;
            border: transparent;
            font-family: Verdana,sans-serif;
            font-style: italic;
            text-align: center;
            outline: none;
    position: absolute;
    z-index: 1;
    margin-left: 875px;
    margin-top: 115px;

}

.LogInputPanel{
    position: fixed;
    z-index: 0;
    margin-left: 800px;
    margin-top: 100px;

}

.PassInput{
    position: absolute;
    z-index: 1;
    margin-left: 875px;
    margin-top: 170px;
}
.PassInputPanel{
    position: fixed;
    z-index: 0;
    margin-left: 800px;
    margin-top: 155px;
}


hapertown

Dziękuję już oglądam.
Normalnie pewnie bym poszukał odnośnie tej niebieskiej obramówki, jednak pisałem tego posta przed wyjściem do pracy i pomyślałem "a co mi tam? Przy okazji zapytam, może jakaś dobra dusza podpowie". ;)

EDIT: Temat do zamknięcia, całkiem przypadkiem trafiłem na rozwiązanie kwestii z mojego pytania i teraz wszystko bangla, w razie gdyby ktoś szukał, zmienić <input type="text" placeholder="Imię i nazwisko"> na <input class="nazwa" type="text" placeholder="Imię i nazwisko"> i w CSS posłużyć się .nazwa{}.

1 użytkowników online, w tym zalogowanych: 0, gości: 1